How to Write Flow

What is Flow?

Flow (created by Facebook) is a static type checker for your Javascript code. Using it's powerful analysis tools, Flow can tell what types of data you're looking for and where that data should be at any given point to help you write cleaner, better code. From the Flow documentation:

Flow checks your code for errors through static type annotations. These types allow you to tell Flow how you want your code to work, and Flow will make sure it does work that way.

Why Flow?

Checking your code for type errors as you go is incredibly helpful. Both to you and the code that you're writing. Finding breaking errors as you go (instead of waiting to run your code to find them) helps you code faster and get it right the first time. Also, how great would it be if you could guarantee that what you're trying to pass to that one function is actually what the function calls for and not something completely random that may or may not actually throw an error otherwise? Javascript can do some wild things with strings and numbers and types and whatnot. And not all of those things will necessarily throw errors. Type checking with Flow can help keep things under control.

How Do I Use It?

Our project already has Flow installed (you can read the docs on how to do that at https://flow.org/en/docs/install/). We also have a .flowconfig file in our project root that specifies certain things to include, exclude, or options that are specific to our installation. You can find more information about the .flowconfig file at https://flow.org/en/docs/config/.

To use Flow in our project, start by adding // @flow to the top of any .js file that contains actual project code. We skip things like test files found in __tests__ folders, so adding it there wouldn't be very helpful. The // @flow directive tells Flow to type check this file.

At this point, anything not correctly typed should start to show you errors in your code editor of choice. You may need to install an add-on to your IDE in order to get them to start showing up. We'll provide a list of the ones that we use at the end of this document in case you need it. If you have a preference or don't see the one you use listed, let us know and we'll add it!

How to Run Flow

Flow should run automatically in your IDE while your coding. This is great for making sure what you are coding in that particular file is correct. To check your entire app, you can run yarn flow from your terminal. If you need to stop the Flow server that is auto-running for some reason before starting your Flow tests, you can run yarn flow-stop before running yarn flow.

Official Flow website: https://flow.org/

IDE Flow Add-Ons:

• Atom: https://github.com/AtomLinter/linter-flow
• VSCode:
• Vim: https://github.com/flowtype/vim-flow