4 category: JavaScript libraries
18 function square (n: number) {
22 const four = square(2)
26 Most of what you need to do is to simply add annotations to function arguments!
28 See: [flow.org docs](https://flow.org/en/docs/)
33 function square (n: number) {
39 `result` is inferred to be a number because `number * number` will result in a number. There's no need to give it annotations.
51 {: data-line="1,2,3,4,5,6"}
54 function greet(user: Person) {
55 console.log('hello', user.name)
61 greet({ name: 'Miles Davis', ··· })
64 This is the typical way to define the shape of complex objects.
69 const count: number = 200
72 You typically don't need to do this, function args are often enough.
74 See: [Variable types](https://flow.org/en/docs/types/variables/)
76 ### Importing and exporting
79 import type { Person } from './types'
83 export type Person = {
88 See: [Module types](https://flow.org/en/docs/types/modules)
93 type Action = number | string
97 type Direction = 'left' | 'right'
100 See: [Unions](https://flow.org/en/docs/types/unions/)
114 const a: Album = { } // ✗ Error
115 const a: Album = { name: 'Blue' } // ✓ OK
116 const a: Album = { name: null } // ✓ OK
117 const a: Album = { name: undefined } // ✓ OK
120 This makes `name` either a string or null.
122 See: [Maybe types](https://flow.org/en/docs/types/primitives/#toc-maybe-types)
124 ### Optional properties
134 const a: Album = { } // ✓ OK
135 a.name = 'Blue' // ✓ OK
136 a.name = null // ✗ Error
137 a.name = undefined // ✓ OK
140 This makes an `Album` valid even if `name` is not part of the keys. This is different from "maybe" types.
142 See: [Optional properties](https://flow.org/en/docs/types/primitives/#toc-optional-object-properties)
159 label: 'Naked Music',
160 genre: 'House' // ✓ OK
165 A type with more properties is "wider" and is a subtype of a "narrower" type.
167 See: [Width subtyping](https://flow.org/en/docs/lang/width-subtyping/)
169 ### Exact object types
182 label: 'Naked Music',
183 genre: 'House' // ✗ Error
188 Exact object types prevent extra properties from being added to an object.
190 See: [Exact object types](https://flow.org/en/docs/types/objects/#toc-exact-object-types)
201 See: [Dynamic object keys](https://flow.org/en/docs/types/objects/#toc-objects-as-maps)
207 | Type | Description |
214 | `void` | undefined |
215 | `null` | null (but not undefined) |
217 | `{a: Number}` | Object with a shape |
218 | `[any, number]` | Tuples (fixed-length arrays) |
225 | `?number` | Maybe (number, void, null) |
226 | `a | b` | Union types |
231 type Suit = "Diamonds" | "Clubs" | "Hearts" | "Spades"
239 type Country = $Keys<typeof countries>
242 See: [Enums](https://flow.org/en/docs/types/utilities/#toc-keys)
250 qux: (foo: string, bar: number) => boolean
258 See: [Type aliases](https://flow.org/en/docs/types/aliases/)
263 class GenericClass<T> {
265 constructor (x: T) { ... }
268 var n: GenericClass<number> = new GenericClass(0)
271 See: [Generic classes](https://flow.org/en/docs/types/generics/#toc-classes-with-generics)
281 toJSON() { return '{}' }
287 See: [Interfaces](https://flow.org/en/docs/types/interfaces/)
292 const callback: () => void = function () {}
298 callback: (item: T) => boolean
304 See: [Functions](https://flow.org/en/docs/types/functions/)
309 import type { Person } from '../person'
310 import typeof Config from '../config'
314 export type Person = { id: string }
321 export type Foo = { ... }
324 function add(n /*: number */) { ... }
338 class Foo extends React.Component<Props, State> {
348 var myNumbers: Array<number> = [42]
349 function foo(): any { return 42 }
350 var b: boolean = false
351 var b: ?boolean = false /* maybe */
352 var b: string | boolean = false
354 var a: Class<MyClass> = MyClass
355 var b: MyClass = new a()
358 ### Function signature
361 type Callback = (?Error, string) => any
363 function fetch (callback: Callback) {
370 - [Flow website](https://www.saltycrane.com/flow-type-cheat-sheet/latest/) _(flow.org)_
371 - [Getting started with Flow](https://flow.org/en/docs/getting-started/) _(flow.org)_
372 - [Flow type cheatsheet](https://www.saltycrane.com/flow-type-cheat-sheet/latest/) _(saltycrane.com)_