Flow

Learn how you can 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.

Setting up Flow

In contrast to React PropTypes, Flow is a static typechecker for JavaScript, not just for React components. Flow is also developed in-house at Facebook and thus integrates smoothly with most React setups. Up to version Babel 6, it even came pre-installed as part of the babelpreset-react and could be used without further setup.

Installation

Since Babel 7, Flow has been ported to its own Babel preset. To install it, you can run:

npm install @babel/preset-flow

Or, to install via Yarn:

yarn add @babel/preset-flow

Setting Babel preset

In addition to the installation step, you also have to manually set the @babel/preset-flow as a preset in the Babel config. Presets allow us to remove non-JavaScript syntax—in this case, Flow syntax—during the build process so that we will not run into errors in the browser.

Installing Flow executable

Apart from the Babel Preset, the Flow executable needs to be installed via:

npm install flow-bin

Or, install it the following way using Yarn:

 ...