Flow 速查表

本文根据 Devhints / Flow 翻译。代码示例及版本范围沿用原文。原文标注更新日期：2020-07-05。

入门

简单示例

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

const four = square(2)

你只需为函数参数添加注解即可！

参见： flow.org 文档

类型推断

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

result 被推断为数字类型，因为 number * number 其结果会是一个数字。无需为其添加类型注解。

类型别名

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

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

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

这是定义复杂对象结构的标准方式。

变量

const count: number = 200

通常情况下无需这样做，函数参数类型往往已足够。

参见： 变量类型

导入与导出

import type { Person } from './types'

export type Person = {
  ···
}

参见： 模块类型

联合类型

type Action = number | string

type Direction = 'left' | 'right'

参见： 联合类型

可选类型

Maybe 类型

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

这使得 name 既可以是字符串，也可以是 null。

参见： Maybe 类型

可选属性

type Album = {
  name?: string
}

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

这使得 Album 即使 name 不在其键（属性名）列表中，该对象依然有效。这与“Maybe”类型不同。

参见： 可选属性

对象

宽度子类型（Width subtyping）

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

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

拥有更多属性的类型被称为“更宽”的类型，它是“更窄”类型的子类型。

参见： 宽度子类型（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）

动态键

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

参见： 动态对象键

高级功能

基本类型

枚举

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

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

type Country = $Keys<typeof countries>

参见： 枚举

类型别名

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

type Generic<T> = {
  foo: T
}

参见： 类型别名

泛型类

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

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

参见： 泛型类

接口

interface Jsonable {
  toJSON(): string
}

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

(new Foo: Jsonable)

参见： 接口

函数

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

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

参见： 函数

导入

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

export type Person = { id: string }

注释语法

/*::
  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
}

示例

示例

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()

函数签名

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

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

参考资料

• Flow 网站 (flow.org)
• Flow 入门 (flow.org)
• Flow 类型速查表 (saltycrane.com)