Flow basics

yarn flow -- init

yarn global add flow-typed
# npm install --global flow-typed

# garb all the types for the things we have installed
flow-typed install

# run Flow on your project (opted-in files)
yarn flow

creates .flowconfig

/**
.flowconfig
*/

[ignore]

[include]

[libs]

[options]

  • Having a .flowconfig is enough to acknowledge you’re using Flow, even if it is empty
  • Flow allows you to slowly include files in a mature project
  • flow-typed is going to grab type definitions and add them o your project in an automated fashion
  • Better errors, you get better errors!
  • Flow can also be used as a replacement for propTypes

If you get Flow errors with styled-components

[ignore]
<PROJECT_ROOT>/node_modules/styled-components/*
  • Upfront you have to spend a lot of time putting the types in place

  • You add files to Flow by adding // @flow at the beginning of the file

// @flow

import React, { Component } from 'react';
  • Adding type annotations to your code is not valid javascript, so you’ll need a Babel plugin to transform your annotated code to regular JS.
  • the react preset for Babel includes flow annotation.