Flow basics

April 2, 2019

code

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

code

/**
.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

code

[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

code

// @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.

Flow basics

Links