Notes

Flow basics

getting started with Flow type checking in a React project, flow-typed, .flowconfig, and the styled-components ignore fix

Edit on GitHub

JavaScript
JavaScript Flow React Babel
 1yarn flow -- init
 2
 3yarn global add flow-typed
 4# npm install --global flow-typed
 5
 6# garb all the types for the things we have installed
 7flow-typed install
 8
 9# run Flow on your project (opted-in files)
10yarn 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

1// @flow
2
3import 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.

Related

Browse all topics