BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

Facebook Flow Provides More Static Typing for JavaScript

| by Abel Avram Follow 4 Followers on Nov 19, 2014. Estimated reading time: 3 minutes |

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.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT