## Getting started

### Simple example

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

    const four = square(2)

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

See: flow.org docs

### Type inference

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

`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

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

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

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

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

### Variables

    const count: number = 200

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

See: Variable types

### Importing and exporting

    import type { Person } from './types'

    export type Person = {
      ···
    }

See: Module types

### Union types

    type Action = number | string

    type Direction = 'left' | 'right'

See: Unions

## Optionals

### Maybe types

    type Album = {
      name: ?string
    }

    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

    type Album = {
      name?: string
    }

    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

### Width subtyping

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

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

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

See: Width subtyping

### Exact object types

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

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

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

See: Exact object types

### Dynamic keys

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

See: Dynamic object keys

## Advanced features

### Primitives

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)
`a | b` | Union types

### Enums

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

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

    type Country = $Keys<typeof countries>

See: Enums

### Type aliases

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

    type Generic<T> = {
      foo: T
    }

See: Type aliases

### Generic classes

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

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

See: Generic classes

### Interfaces

    interface Jsonable {
      toJSON(): string
    }

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

    (new Foo: Jsonable)

See: Interfaces

### Functions

    const callback: () => void = function () {}

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

See: Functions

### Imports

    import type { Person } from '../person'
    import typeof Config from '../config'

    export type Person = { id: string }

### Comment syntax

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

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

### React

    type Props = {
      bar: number,
    }

    type State = {
      open: boolean,
    }

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

## Examples

    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

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

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

## References

- Flow website (flow.org)
- Getting started with Flow (flow.org)
- Flow type cheatsheet (saltycrane.com)

0 Comments for this cheatsheet. Write yours!