Skip to content
Logo Theodo

Go With the Flow - A Static Type Checking Tool for JavaScript

Jérémy Dardour4 min read


Static Type Checking is Life, Static Type Checking is Love

Javascript has been a hot topic for web developers for some time now.
It’s fast, runs everywhere and offers many wonderful frameworks such as Angular and React.
However, its lack of static typing can be a real pain for developers, bugs only appear at runtime, are hard to find and code refactoring is a real challenge.
This is where static type checkers such as TypeScript and Flow come into play with their main features being:

When Should You Use a Type Checker?

If you are sick and tired of random errors induced by typing errors, you should definitely join the static type checking club!

What Does Flow Bring to the Game?

What Flow Is

Flow is a JavaScript static type checker. The open source project has 9,000+ stars on GitHub at the time this article is being written.
The project is active - more than 30 commits are merged in average every week with bug fixing and new features.


It was introduced by Facebook in 2014 with two main features:

How does it work?

Flow is a checker while TypeScript is a compiler.

Flow works in two different ways:


The second point, called type inference, is one of the main features of Flow. It makes it possible for Flow to check your code even if you don’t adapt it, you can see an example in the code below.



To run Flow code Facebook recommends to use Babel to strip static types before serving the client, you can find more information about this here

Why Should You Use Flow?

Getting Started with Flow

How Can you Start Using it?

To get started with Flow on an existing project you’ll need to go through some basic steps:

In your project’s directory

"scripts: {
   "flow": "node node_modules/.bin/flow"

It’s that easy!
And now you can start implementing it in your code by adding an annotation at the top of the files you want to check:

    // @flow

    var str = 'hello world!';

If you get npm error info after the command it’s the way npm reacts to Flow exiting with errors, that won’t affect Flow’s accuracy.

If you Use it, Use it Right!

There are two ways to use Flow, the right way and the wrong way.
You can always use it with no further installs by running
npm run flow in your CLI which will show you all the typing errors it can find.

But the most efficient and fastest way of using it is through an IDE plugin of which here are some examples:

These plugins usually start the flow server and allow you to see errors as you write your code, much like a linter would.


It saves you the pain of writing then checking so that you can write “flowless” code right from the start ;).


Make Your Code Safer and More Reliable

Flow will increase the safety and maintainability of your app.
It can prevent a lot of type induced regressions on your projects and make bugs easier to find as they appear at buildtime or even as you write thanks to Flow IDE linters.

It will make your code more understandable and safer to refactor.

Spare Yourself Type Checking Tests

You will never have to write tests like this ever again!

  it 'should create a favorites array in local storage', ->

Why Flow Instead of TypeScript ?

Flow is growing really fast with a lot of support and most of all, it works really great with Facebook’s React framework which makes it even more exciting.

Flow handles non-nullable types as default while TypeScript does not and Flow is generally more expressive. That means that Flow will catch more errors related to variables ending up null.

Finally, Flow requires a smaller effort to be implemented on existing projects as you can start checking your files gradually.

Liked this article?