Flow Cheat Sheet

From WikiOD

Here is the cheatsheat of Flow and basic guide on how to use Flow

Getting started[edit | edit source]

{: .-three-column}

Simple example[edit | edit source]

{: .-prime}

/* @flow */
function square (n: number) {
  return n * n
}

const four = square(2)

{: data-line=“1,2”}

Most of what you need to do is to simply add annotations to function arguments!

See: flow.org docs

Type inference[edit | edit source]

function square (n: number) {
  const result = n * n
}

{: data-line=“2”}

result is inferred to be a number because number * number will result in a number. There’s no need to give it annotations.

Type aliases[edit | edit source]

type Person = {
  name: string,
  age: number,
  isAdmin: boolean,
  likes: Array<string>
}

{: data-line=“1,2,3,4,5,6”}

function greet(user: Person) {
  console.log('hello', user.name)
}

{: data-line=“1”}

greet({ name: 'Miles Davis', ··· })

This is the typical way to define the shape of complex objects.

Variables[edit | edit source]

const count: number = 200

You typically don’t need to do this, function args are often enough.

See: Variable types

Importing and exporting[edit | edit source]

import type { Person } from './types'
export type Person = {
  ···
}

See: Module types

Union types[edit | edit source]

type Action = number | string
type Direction = 'left' | 'right'

See: Unions

Optionals[edit | edit source]

Maybe types[edit | edit source]

type Album = {
  name: ?string
}

{: data-line=“2”}

const a: Album = { }                 // ✗ Error
const a: Album = { name: 'Blue' }    // ✓ OK
const a: Album = { name: null }      // ✓ OK
const a: Album = { name: undefined } // ✓ OK

This makes name either a string or null.

See: Maybe types

Optional properties[edit | edit source]

type Album = {
  name?: string
}

{: data-line=“2”}

const a: Album = { } // ✓ OK
a.name = 'Blue'      // ✓ OK
a.name = null        // ✗ Error
a.name = undefined   // ✓ OK

This makes an Album valid even if name is not part of the keys. This is different from “maybe” types.

See: Optional properties

Objects[edit | edit source]

{: .-three-column}

Width subtyping[edit | edit source]

type Artist = {
  name: string,
  label: string
}
const a: Artist = {
  name: 'Miguel Migs',
  label: 'Naked Music',
  genre: 'House' // ✓ OK
}

{: data-line=“6”}

A type with more properties is “wider” and is a subtype of a “narrower” type.

See: Width subtyping

Exact object types[edit | edit source]

type Artist = {|
  name: string,
  label: string
|}

{: data-line=“1,4”}

const a: Artist = {
  name: 'Miguel Migs',
  label: 'Naked Music',
  genre: 'House' // ✗ Error
}

{: data-line=“4”}

Exact object types prevent extra properties from being added to an object.

See: Exact object types

Dynamic keys[edit | edit source]

type Items = {
  [key: string]: Item
}

{: data-line=“2”}

See: Dynamic object keys

Advanced features[edit | edit source]

Primitives[edit | edit source]

Type Description
any
boolean
mixed
number
string
void undefined
null null (but not undefined)
{a: Number} Object with a shape
[any, number] Tuples (fixed-length arrays)
Array<T>
Class<T>
Function
Object
?number Maybe (number, void, null)
b Union types

Enums[edit | edit source]

type Suit = "Diamonds" | "Clubs" | "Hearts" | "Spades"

const countries = {
  US: "United States",
  IT: "Italy",
  FR: "France"
}

type Country = $Keys<typeof countries>

See: Enums

Type aliases[edit | edit source]

type Tree = {
  foo: string,
  bar: number,
  qux: (foo: string, bar: number) => boolean
}

type Generic<T> = {
  foo: T
}

See: Type aliases

Generic classes[edit | edit source]

class GenericClass<T> {
  x: T
  constructor (x: T) { ... }
}

var n: GenericClass<number> = new GenericClass(0)

See: Generic classes

Interfaces[edit | edit source]

interface Jsonable {
  toJSON(): string
}

class Foo {
  toJSON() { return '{}' }
}

(new Foo: Jsonable)

See: Interfaces

Functions[edit | edit source]

const callback: () => void = function () {}
function filter<T> (
  list: Array<T>,
  callback: (item: T) => boolean
): Array<T> {
  ···
}

See: Functions

Imports[edit | edit source]

import type { Person } from '../person'
import typeof Config from '../config'
export type Person = { id: string }

Comment syntax[edit | edit source]

/*::
  export type Foo = { ... }
*/

function add(n /*: number */) { ... }

React[edit | edit source]

type Props = {
  bar: number,
}

type State = {
  open: boolean,
}

class Foo extends React.Component<Props, State> {
  // Component code
}

Examples[edit | edit source]

Examples[edit | edit source]

var myNumbers: Array<number> = [42]
function foo(): any { return 42 }
var b: boolean = false
var b: ?boolean = false  /* maybe */
var b: string | boolean = false

var a: Class<MyClass> = MyClass
var b: MyClass = new a()

Function signature[edit | edit source]

type Callback = (?Error, string) => any

function fetch (callback: Callback) {
  ···
}

References[edit | edit source]

Credit:rstacruz