Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Up and Running with Facebook Flow for Typed JavaScript

    Josh BlackJosh Black

    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.

    flowFlow
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:01 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.

    00:16 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.

    00:39 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.

    00:55 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.

    01:11 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.

    01:29 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.

    01:44 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.

    Discuss

    Discuss