Up and Running with Facebook Flow for Typed JavaScript

Josh Black
InstructorJosh Black

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

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.

[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.

RichardForrester
RichardForrester
~ 6 years ago

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

Damian Joniec
Damian Joniec
~ 3 years ago

I know you are using vim but how to go to flow (stuff what happens at 0:15) using normal power shell and webstorm or vscode?

When I try to follow those instruction in power shell I get those errors: PS C:\Users\DamianJoniec\documents\flow-init\node_modules.bin> flow init flow : The term 'flow' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1

  • flow init
  •   + CategoryInfo          : ObjectNotFound: (flow:String) [], CommandNotFoundException
      + FullyQualifiedErrorId : CommandNotFoundException
    
    

Suggestion [3,General]: The command flow was not found, but does exist in the current location. Windows PowerShell does not load commands from the current location by default. If you trust this command, instead type: ".\flow". See "get-help about_Command_Precedence" for more details. PS C:\Users\DamianJoniec\documents\flow-init\node_modules.bin>