An introduction to Flowtype

Christoffer Niska

Type checking

The benefits

• Boosts confidence
• Increases productivity
• Better end results

Features

Type inference

const item = 'something';
const list = [item];

// is the same as:

const item: string = 'something';
const list: Array<string> = [item];

Flow infers types automatically when you assign values to your variables.

Union types

type Something = string | number | null;

type AllowedActions = IncrementAction | DecrementAction;

Useful when you want define types that accept multiple types.

Generic types

type Action<Type: string, Payload> = {
  type: Type,
  payload: Payload
};

Useful when you want to define dynamic types that you can reuse.

Demo

Nullable types

const takesOptionalType = (type: ?string) => {
  ...
}

type Driver = {
  rating: ?number
}

Useful when you want to define optional arguments or properties.

any, mixed and *

// anything will flow into any, but you loose type-safety

const takesAnything = (anything: any) => null

// mixed requires you to type-check before using the value

const takesMixed = (something: mixed) => {
  if (typeof something === 'string') {
    // ...
  }
}

// asterisk (*) infers its type

class Driver {
  rating: *;

  constructor() {
    this.rating = 5; // rating becomes a number
  }
}

$FlowFixMe

...

// $FlowIgnore
export default connect(/* ... */)(Counter)

You will loose type-safety if you tell Flow to ignore your code.

Easy migration

Editor support

Flow-typed

The caveats

• New technology
• Learning curve
• Point of no return

Questions?

Thank you

Twitter, GitHub: @Crisu83