Type Checking with Flow

JavaScript maybe the fast, expressive, light-weight, functional, awesome, programming language, with a huge community support (Go JavaScript) but it lacks static typing which often slows down developers.

Since the result of your JavaScript code can only be determined at the runtime, simple mistakes like calling method on wrong type or a missing undefined check will be overlooked, until you run your code.

Angular 2 already supports TypeScript which is a superset of JavaScript that compiles to plain JavaScript.

TypeScript is an Open Source programming language developed and maintained by Microsoft which is known for its type checking and static verification of code while its being written. Instead of getting errors at runtime you’ll get to know your mistakes while you are writing code.

TypeScript - JavaScript that scales.

But, what about applications developed in Angular 1.x?

Enter Flow

A static type checker for JavaScript

Flow is open-source static type checker for JavaScript developed at Facebook. Flow checks for errors in JavaScript programs before they run but unlike TypeScript, Flow can be implemented in your existing JavaScript code.

Also, TypeScript forces you to add a type annotation to the code in order to implement its type checking, while Flow can still check the code for type errors without having to explicitly annotate that code with types. Though you can if you want to.

Installing Flow

To start using Flow you can either install it as a dev dependency to your project

npm install --save-dev flow-bin

Or globally

npm install -g flow-bin

You need to run the Flow server, for locally installed flow start it by

node_modules/.bin/flow

and for globally installed

flow

To initialise Flow in your project use the following command in the root of your project

flow init

Add this to the top of the file you want to type-check

/* @flow */

Run this and let the Flow flow through your program

flow check

Flow will check your files with ‘@flow’ and see for any type error and displays a nice output in your terminal

Output of the command ‘flow check’

You need to run the command in order to check for the errors each time, or you can use…

Flow with Atom

An amazing Atom package let’s you use Flow in your projects to lint your JavaScript files on the fly without having to ‘flow check’ every-time.

It also manages the flow server by itself so you don’t need to start the server this time.

linter-flow

With this package installed, every-time you open a file with ‘@flow’ in your atom, you’ll see linter warnings like this,

linter-flow in action

We have designed Flow so developers can reap its benefits without losing the “feel” of coding in JavaScript.— Flow, a new static type checker for JavaScript

I hope this helps you in initialising Flow in your projects, thanks for reading.