Type Checking In JavaScript: Getting Started with Flow.

Just flow with the flow.

Designed by the Facebook team(open source) and for JavaScript developers, Flow is a static type checker that catches common errors in your application before they run.

What is meant by a Static type checker?

This generally means that the type of a variable is known at compile time. For some languages this means that you as the programmer must specify what type each variable is (e.g.: Java, C, C++); other languages offer some form of type inference, the capability of the type system to deduce the type of a variable (e.g.: OCaml, Haskell, Scala) — stackoverflow.

Flow integrates with your code editor by checking changes and analyzing correctness of your code while you write code. Flow not only points out the error in your code, it also provides context as to what is wrong with the code.

In this article we’d see dive into the smoothness of Flow and see how it could be beneficial for us. Make sure you have NodeJS installed.

Pull out your code editor, I would be using Sublime-text as that is my code editor. There’s support for other editors such as vim, emacs and nuclide.

Using Sublime-text, you would need to install a sublimeLinter package to have Flow working correctly which is SublimeLinter-Flow.

Getting started is easy:

Create a new project folder or open your already existing project.
Create a _.flowconfig_ file in your project root.
_npm install --save-dev flow-bin_
Create a new file index.js or open any of your JS files. Just right at the top add this tiny JavaScript comment // @flow and that’s all.

In the index.js file add this snippet for a start:

var str: number = 'hello world!';console.log(str);

In your code editor, if you’re using Sublime text, you should see something like this below.

Error messages displayed.

What we did here was add a trivial type error, we expect str to be a number but instead we assigned it a string.

To show that Flow constantly guards your code, take out the //@flow comment and see what happens. The error highlights are gone.

Removing the flow comments triggers either to watch for errors or not.

You can also check for errors in your terminal by running the command flow , you would get a log showing where the error occurred.

Error log typing flow in the command line.

Now if you had an existing project or you created a new project. If you ran your project or node index.js in your terminal, you would get a different error from what flow shows you.

var str: number = 'hello world!';^SyntaxError: Unexpected token :

This is because we need to add Babel and a Babel plugin to help us transpile our code.

Install babel-cli if you don’t already have it npm install -g babel-cli
npm install —-save-dev babel-plugin-transform-flow-strip-types
Create a .babelrc file in your project root and add {"plugins: ["transform-flow-strip-types"]}
In your terminal, run babel-node index.js

If you will notice, even with the error Flow complains about, it was ignored. Meaning Flow does not stop you from going further with other things. But it is advisable to fix your errors before pushing to production :).

Now to correct our error and let Flow stop barking at us for sending the wrong type. All we have to do is change number to string

var str: string = 'hello world!';console.log(str);

Flow supports a bunch of other types such as:

And more, be sure to check them out.

One last example:

Flow also supports type checking in function parameters.

function doggy(x: number) {return x + 1;}

What this means is that, we declare a function and we expect a number as the parameter.

if we called the function:

doggy(3) // flow displays no errorsdoggy("hola!") // we seem to enjoy flows error colors here.

Just one last example.

Just One Last Example:

Having worked with Flow for a while now, i haven’t covered all the goodness of what Flow offers but here’s my favourite so far, feel free to share what you like about Flow in the comments to help others learn more.

Flow allows us to define a function along with the return value we expect. What ever the function type may be, Async, Generators, Flow is compatible.

function doggy(x: number): number {return "c";// throws error because a string is returned.}

function catty(x: number): number {return 3; //throws no error because a number is returned}

Finally!

Check out Flow for React as well.

With this Type Checking, there are some advantages such as better productivity, more readable code and autocompletion by flow. Cheers!