w3resource
React Tutorial

Static Type Checking


Static type checkers like Flow and TypeScript identify certain types of problems before you even run your code. They can also improve developer workflow by adding features like auto-completion. For this reason, we recommend using Flow or TypeScript instead of PropTypes for larger code bases.

Flow

Flow is a static type checker for your JavaScript code. It is developed at Facebook and is often used with React. It lets you annotate the variables, functions, and React components with a special type syntax, and catch mistakes early.

To use Flow, you need to:

  • Add Flow to your project as a dependency.
  • Ensure that Flow syntax is stripped from the compiled code.
  • Add type annotations and run Flow to check them.

Adding Flow to a Project

First, navigate to your project directory in the terminal. You will need to run the following command:

If you use Yarn, run:
yarn add --dev flow-bin

If you use npm, run:

npm install --save-dev flow-bin

This command installs the latest version of Flow into your project.

Now, add flow to the "scripts" section of your package.json to be able to use this from the terminal:

{
  // ...
  "scripts": {
    "flow": "flow",
    // ...
  },
  // ...
}

Finally, run one of the following commands:

If you use Yarn, run:

yarn run flow init

If you use npm, run:

npm run flow init

This command will create a Flow configuration file that you will need to commit.

Stripping Flow Syntax from the Compiled Code

Flow extends the JavaScript language with a special syntax for type annotations. However, browsers aren't aware of this syntax, so we need to make sure it doesn't end up in the compiled JavaScript bundle that is sent to the browser.

The exact way to do this depends on the tools you use to compile JavaScript.

Create React App

If your project was set up using Create React App, congratulations! The Flow annotations are already being stripped by default so you don't need to do anything else in this step.

Babel

Note:

These instructions are not for Create React App users. Even though Create React App uses Babel under the hood, it is already configured to understand Flow. Only follow this step if you don't use Create React App.

If you manually configured Babel for your project, you will need to install a special preset for Flow.

If you use Yarn, run:

yarn add --dev babel-preset-flow

If you use npm, run:

npm install --save-dev babel-preset-flow

Then add the flow preset to your Babel configuration. For example, if you configure Babel through .babelrc file, it could look like this:

{
  "presets": [
    "flow",
    "react"
  ]
}

This will let you use the Flow syntax in your code.

Note:

Flow does not require the react preset, but they are often used together. Flow itself understands JSX syntax out of the box.

Other Build Setups

If you don't use either Create React App or Babel, you can use flow-remove-types to strip the type annotations.

Running Flow

If you followed the instructions above, you should be able to run Flow for the first time.

yarn flow

If you use npm, run:

npm run flow

You should see a message like:

No errors!
Done in 0.17s.

Adding Flow Type Annotations

By default, Flow only checks the files that include this annotation:

// @flow

Typically it is placed at the top of a file. Try adding it to some files in your project and run yarn flow or npm run flow to see if Flow already found any issues.

There is also an option to force Flow to check all files regardless of the annotation. This can be too noisy for existing projects, but is reasonable for a new project if you want to fully type it with Flow.