This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Up and Running with Facebook Flow for Typed JavaScript

2:11 JavaScript lesson by

Let's learn how to set up Facebook's Flow inside of a project and write a simple typecheck task that will let us run Flow against any files in our codebase.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Let's learn how to set up Facebook's Flow inside of a project and write a simple typecheck task that will let us run Flow against any files in our codebase.

Avatar
RichardForrester

You should append ; exit 0 to your npm script to suppress the unnecessary error messages.

To get started, let's go ahead and install a package called flow-bin. Once that package is done installing, we can go into our Node modules folder inside of the .bin directory and use Flow to run a command called init.

The init command here generates a .flow config file. We can actually specify various settings inside of this Flow config file to help us configure the Flow type checker. Now that we have our Flow config file, let's open up our package.json file, and create a script called type check.

Type check is going to be a command that we can run from the command line to run Flow on a source directory. In this case, I'm going to use the check command, and I'm going to pass in the name of the directory that I want to check, called source.

Now that I have the type check script set up, let's go into the index.js that I have set up inside of my source directory that I want to type check. Inside of here is just a function called add, that takes in two numbers and returns a number.

At the bottom here, I have an improper usage of my add function. To get Flow to actually type check this file, we just need to add the @flow pragma to the top of the file. Now I can go back into the terminal and run NPM run type check.

We can see that Flow is actually going to throw some errors here. We can scroll up in the terminal here and see that it's calling out that we're using the add function with a string when it expected a number. Let's go fix that.

We can scroll down back to the bottom of our terminal and open up that source/index.js file again. Inside of here, change the string two to the number two. We can then hop back into our terminal and run NPM run type check. In this case, Flow found zero errors in our project, so we're good to go.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?