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.
- Share this lesson:
Subscriber comments are a way for PRO Subscribers to communicate, interact, and ask questions about a lesson.
Here are some basic guidelines for commenting on egghead.io.
Comments are for discussing a lesson. If you’re having a general issue with the website functionality, please contactclick here.
Is your comment resembles:
- This was great!
- This was horrible!
- I didn’t like this because it didn’t match my skill level.
It will likely be deleted as "meta".
Should be accompanied by code! JSFiddle, Plunker, CodePen, etc all provide a way to share code and discuss it in context.
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!
egghead.io comment guidelines
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.