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