Typescript - fp-ts - Either monad

<!DOCTYPE html>
<html>
  <head>
    <title>Typescript</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <script src="https://jspm.io/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('./src/main.ts');
    </script>
    
    <div id="results">
    </div>
  </body>

</html>

/* Styles go here */

/*global System */
'use strict';


System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src",
    "fp-ts" :"npm:fp-ts@0.5.3"
  },
  //packages defines our app package 
  packages: {
    app: {
      main: './main.ts', 
      defaultExtension: 'ts'
    }
  }
});

import { log } from './helper'

// Import either monad
import { either } from 'fp-ts'

// define a divide function
// that returns right(number) 
// if the denominator (y) is not zero
// otherwise returns left(string)
const divide = (x: number, y: number): either.Either<string, number> => {
    switch (y) {
        case 0:
            return either.left("Denominator is zero");
        default:
            return either.right(x / y)
    }
}

// valid arguments, right(2)
log(divide(4, 2))

// invalid arguments, left
log(divide(4, 0))

// you can project (or map) the result 
// of a valid operation
// right(6)
log(divide(4, 2)
    .map((result: number) => result * 3))


// mapping a left yields left, thus, it's safe
// to work with them
log(divide(4, 0)
    .map((result: number) => result * 3))


// you can take the value out of the box (Monad)
// by using getOrElse

log(divide(4, 2)
    .map((result: number) => "Your result is " + result)
    .getOrElse((error:string) => error))

log(divide(4, 0)
    .map((result: number) => "Your result is " + result)
    .getOrElse((error:string) => error))

export const log = (message) => {
  document.getElementById("results").innerHTML+= message + "<br/>";
}