flow-type.md

._   _       _            
| \ | | ___ | |_ ___  ___
|  \| |/ _ \| __/ _ \/ __|
| |\  | (_) | ||  __/\__ \
|_| \_|\___/ \__\___||___/

Flow

• Flow type cheat sheet - SaltyCrane Blog
• Pro-tip: Put your @flowtype libdefs in a dir called "flow-typed" in the same dir as your .flowconfig. No need for any [libs] configuration! - tweet
• console flow-type: https://github.com/jeffmo/jest/blob/fef19c897fcf646e66a7cd6120b4b743846159b5/flow-typed/console.js
• Did you know you can use capture groups in #flowtype's name_mapper option? E.g. 'mylib/(.*)' -> '<PROJECT_ROOT>/dist/lib/\1' .. NEAT!
• How to read error messages: "Basically every error has two parts. They are related. Since Flow is about asserting how types "flow" into each other, an error may happen on one of two sides." - abramov

Tools

• thejameskyle/babel-plugin-react-flow-props-to-prop-types: Convert Flow React props annotation to PropTypes. See this for the announcement.
• Type safe CSS Modules with Flow

Still some rough patches

• $Keys types values missing in autocomplete
  • Example of editor tooling not being caught up with the actual type checking
• No @decorator support
  • Really a bummer when using MobX
• No platform-specific support (RN's index.android.js) - issue
• Sometimes confusing error messages

Companies using Flow

• Facebook
• Coursera

Style

Array<Foo>, not Foo[]

Why?

• Because when you inevitably need to make it a union, Array<Foo | Bar> works but Foo | Bar[] doesn't
• Also, what if you had a set? Set<Foo>
• See https://twitter.com/spikebrehm/status/832675779070750720

FAQ

Children

import React from 'react';
import type { Children } from 'react';
type Props = {
  children?: Children,
};
const SampleText = (props: Props) => (
  <div>{props.children}</div>
);

from https://stackoverflow.com/questions/40651126/flow-type-annotation-for-children-react-elements

binding methods in class gives me some "Covariant" errors

Must type them as Function in class:

class HeaderContainer extends React.Component {

  handleNavigate: Function;
  toggleMenu: Function;

  constructor(props: Object) {
    super(props);
    this.handleNavigate = this.handleNavigate.bind(this);
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  handleNavigate() {
    console.log('hey');
  }

  toggleMenu() {
    console.log('ho');
  }

  render() {
    return (
      <div />
    );
  }
}

from ryyppy/flow-guide#6

DefaultProps get nullable type errors

"You don’t have to mark your defaultProps as optional properties in your props. Flow knows how to handle them properly." from official docs

How to type-check HOCs?

Typing Higher-order Components in Recompose With Flow