MENU

Flow

Developed and maintained by Facebook, Flow is a static type checker for JavaScript. It is meant to support React.

To install Flow:

Add to 'package.json':

Then initialize Flow:

If your project was set up using Create React App, the Flow annotations are already being stripped by default so you don't need to do anything else.To start the Flow server, which checks for changes in .js files with the //@flow annotation in the current directory and its subdirectories:

To stop the server:

To strip the type annotations from these Flow .js files:

An explanation of all the possible Flow syntaxes is beyond the scope of this book:

type GreetingProps = { name: string };class Greeting extends React.Component<GreetingProps, void> { constructor(props: GreetingProps) {
  super(props);  // some initialisation stuff } render() {
  const {name} = this.props;
  return (<div>{name}</div>);
  }}

type GreetingProps = { name: string };class Greeting extends React.Component<GreetingProps, void> { constructor(props: GreetingProps) {
  super(props);  // some initialisation stuff } render() {
  const {name} = this.props;
  return (<div>{name}</div>);
  }}

Using data flow analysis, Flow automatically infers types and tracks data as it moves through your code. You don't need to fully annotate your code before Flow can start to find bugs:

// @flowfunction square(n) {
  return n * n; // Error!}square("2");

// @flowfunction square(n) {
  return n * n; // Error!}square("2");