The Flow Typechecker

Many developers prefer statically typed languages like Scala, Java, and C++. While there are compilers from such languages to JavaScript (e.g. TypeScript, GWT, and Scala.js), incorporating type safety into existing JavaScript code bases is far from trivial.

Enter Flow! It is a static type checker for JavaScript. You can incrementally add Flow type annotations to your JavaScript code instead of rewriting it all in another language.

First, lets install Flow globally:

1
npm install flow-bin -g

This will add the flow command to your terminal environment. Then we need to initialise Flow within the node project directory:

1
flow init

This will create a .flowconfig file with Flow settings.

JavaScript syntax does not support type annotations and adding them would result in syntax errors. One workaround is to add the types as comments which Flow will interpret:

1
2
//@flow
const c /*: number*/ = 'Not a number';

Note the //@flow comment at the beginning of the file. It tells Flow to process the file – otherwise it will ignore it. To analyse the code for type violations, just run flow from the project’s folder. This should report all type errors.

Defining type information in comments is not very convenient. We can use Babel to remove the type annotations for us. Given the Babel setup from the previous secion, we also need to install a plugin for Flow:

1
npm install babel-plugin-transform-flow-strip-types --save-dev

And then the .babelrc file must be configured to use it:

1
2
3
4
{
  "presets": ["env"],
  "plugins": ["transform-flow-strip-types"]
}

Now we can use types in the code:

1
2
3
4
5
6
7
// @flow
function f(name: string): string {
    return `Hello ${name}`;
}

console.log(f('Bob'));    // Types match - all Good
console.log(f(5));        // Will generate Flow error

We can also enable Flow to type check how we use 3rd party libraries. There is a central repository of type definitions for many popular libraries. It can be accessed via the flow-typed module:

1
npm install flow-typed -g

This will enable Flow to dynamically pull library type definitions.

Finally, don’t forget to install a Flow plugin for your favorite editor/IDE to get type hints as you code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// A Promise wraps a higher order function.
// "resolve" and "reject" are callback functions.
function promiseFunction(resolve, reject) {
  const rn = Math.random();

  if(rn < 0.5) {
    // Signal for success
    resolve(rn);
  } else {
    // Signal for failure
    reject('Bad luck');
  }
};

// Wrap the function in a Promise
let promise = new Promise(promiseFunction);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// If called, the "number" parameter is the arguement of the 
// resolve function call from the promise
const successF = number => {
  console.log(`Resolve was called with ${number}`);
}

// If called, the "err" parameter is the arguement of 
// the reject function call from the promise
const errF = err => {
  console.log(`Reject was called with "${err}"`);
}

// The same as "promise.then(successF).catch(errF);"
promise.then(successF, errF);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// A success handling function that reuturns a promise itself
const handleSuccessWithAnotherPromise = number => {
  return new Promise(promiseFunction);
}

// Prints a number if two consequtive invocations of
// "Math.random" returned < 0.5
promise.
  // Handle with a function returning a promise
  then(handleSuccessWithAnotherPromise). 

  // Now we can chain. "console.log" will be run
  // only if both promises have succeeded
  then(console.log).

  // Catch errors of any promise from the chain
  catch(console.log);