Typescript - fp-ts - Option 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 option monad
import { option } from 'fp-ts'

// define a divide function
// that returns some(number) 
// if the denominator (y) is not zero
// otherwise returns none
const divide = (x: number, y: number): option.Option<number> => {
    switch (y) {
        case 0:
            return option.none;
        default:
            return option.some(x / y)
    }
}

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

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

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


// mapping a none yields none, 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(() => "Invalid arguments"))

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

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