Facebook Flow Provides More Static Typing for JavaScript

Announced during @Scale 2014, Facebook has open sourced Flow, a static type checker for JavaScript. Flow joins Microsoft TypeScript and Google AtScript to provide web developers with a tool meant to catch some bugs in the code before they manifest at runtime.

Flow does not attempt to force the web developer into the straightjacket of static types, performing most of its job by using type inference where possible and allowing specifying which JavaScript files are to be verified and which not. When desired, developers can enhance strict type checking by providing types à la TypeScript.

When designing Flow, Facebook started from the presumption that most JavaScript code is “implicitly statically typed”, considering that “even though types may not appear anywhere in the code, they are in the developer’s mind as a way to reason about the correctness of the code,” as explained in a blog post. Thus, Facebook considers their approach to JavaScript type checking as quite different than TypeScript’s which makes “the weaker assumption that most JavaScript code is dynamically typed, and that it is up to the developer to express which code may be amenable to static typing.” As a result, Flow will flag the following snippet as erroneous without needing explicit type annotations:

function onlyWorksOnNumbers(x) {
  return x * 10;
}
onlyWorksOnNumbers(‘Hello, world!’);

This approach can save a lot of keystrokes needed for annotating large codebases.

Some of the Flow’s features are, in short:

• Primitive types: number, string, boolean, forbidding implicit conversions between them
• Structured types associated to functions, objects, arrays
• Polymorphic types
• Supports a number of ECMAScript 6 features: destructuring, classes, extended objects, optional function parameters, Map, Set, Promise
• Supports JSX and React

Flow knows how to deal with null and undefined to make sure they do not generate crashes at runtime. For example, this code generates an error

function length(x) {
  return x.length;
}
var total = length('Hello') + length(null);

while this one does not:

function length(x) {
  if (x !== null) {
    return x.length;
  } else {
    return 0;
  }
}
var total = length('Hello') + length(null);

Flow is aware of Node.js modules, being scalable by running on the server and spreading the work on modules between multiple servers. It may require annotations for types that are to be accessed from other modules.

Flow is yet another JavaScript type checking tool in web developer’s toolbox along with Microsoft’s TypeScript and Google’s AtScript. Both Flow and AtScript are using a type syntax similar to TypeScript’s, but they provide extra features not existent in Microsoft’s tool.

TypeScript is currently a subset of ES6, but it will probably support most if not all ES6 features when version 2.0 is going to be made available, as specified in the roadmap. Optional typing is supported in TypeScript through annotations, generics, interfaces and visibility modifiers.

AtScript targets ES6 and provides type, field and metadata annotations, plus a reflection API performing type introspection at runtime via annotations. It is meant to be backwards compatible with ES5, and currently it is compiled to ES5 and to Dart.

According to Avik Chaudhuri, Facebook chose to develop Flow instead of using TypeScript because it scales better for large codebases and having control over it is better for React. They have managed to infer more types even for code source that is not annotated, and Flow knows how to deal with null or undefined. For a more thorough comparison of the three technologies we recommend Axel Rauschmayer’s blog post “Statically typed JavaScript via Microsoft TypeScript, Facebook Flow and Google AtScript”.

One may wonder what’s with these different JavaScript type checking solutions and what to do about it. A good news is that Microsoft, Facebook and Google are collaborating on these, according to Microsoft’s Jonathan Turner:

The TypeScript team is working with both the Flow and AtScript teams to help ensure that resources that have already been created by the JavaScript typing community can be used across these tools.  There's a lot these projects can learn from each other, and we're looking forward to working together going forward and creating the best tools we can for the JavaScript community.  In the long term, we will also be working to fold the best features of these tools into ECMAScript, the standard behind JavaScript.

Flow comes with binaries for Linux and Mac OS X and the source code has been open sourced on GitHub.