Flow类型的介绍以及使用

---

概述

1. Flow是JavaScript的类型检查器。2014年由facebook开发的。由于JavaScript是一门弱类型语言，我们可以使用Flow解决弱类型的弊端

2. 我们在代码中通过添加一些注解的方式，检查代码中的异常，避免在运行阶段才能发现错误

快速上手

此处说明的是如何将Flow安装到node.js中。
命令：

yarn add flow-bin --dev

PS:–dev 表示安装到项目中。另外如果没有yarn包，需要先安装yarn

一个简单的例子：求两个数字的和

// 不使用Flow的写法
function sum (a, b) {
  return a + b
}
sum(100, 100)

// 使用Flow
// 1.首先添加注解
// @flow
function sum (a: number, b: number) {
  return a + b
}
sum(100, 100)

// 如果使用了flow，如下面的函数传参，就会报错。因为在sum函数中，要求传入两个number类型的参数
// sum('100', '100')
// sum(100, '100')

Flow原始类型

/**
 * 原始类型
 * String、number、boolean、null、void、symbol
 * @flow
 */
const a: string = 'foobar'
const b: number = Infinity // NaN // 100
const c: boolean = false // true
const d: null = null
const e: void = undefined
const f: symbol = Symbol()

Flow数组类型

/**
 * 数组类型
 *
 * @flow
 */
const arr1: Array<number> = [1, 2, 3]
const arr2: number[] = [1, 2, 3]
// 元组
const foo: [string, number] = ['foo', 100]

Flow对象类型

/**
 * 对象类型
 *
 * @flow
 */

const obj1: { foo: string, bar: number } = { foo: 'string', bar: 100 }

const obj2: { foo?: string, bar: number } = { bar: 100 }

const obj3: { [string]: string } = {}

obj3.key1 = 'value1'
obj3.key2 = 'value2'

Flow函数类型

/**
 * 函数类型
 *
 * @flow
 */

function foo (callback: (string, number) => void) {
  callback('string', 100)
}

foo(function (str, n) {
  // str => string
  // n => number
})

Flow特殊类型

/**
 * 特殊类型
 *
 * @flow
 */

// 字面量类型

const a: 'foo' = 'foo'

const type: 'success' | 'warning' | 'danger' = 'success'

// ------------------------

// 声明类型

type StringOrNumber = string | number

const b: StringOrNumber = 'string' // 100

// ------------------------

// Maybe 类型

const gender: ?number = undefined
// 相当于
// const gender: number | null | void = undefined

Flow Mixed与Any

(一)、Mixed：混合类型

包括以下几种情况：

1. 单一类型

比如输入值只能是 number

function square(n: number) {
  return n * n;
}

2. 一组不同的类型

比如输入值可以是string和number

function stringifyBasicValue(value: string | number) {
  return '' + value;
}

3. 基于另一种类型的类型

这里的返回值类型将和传递给函数的任何值的类型相同。

function identity<T>(value: T): T {
  return value;
}

4. 任意类型

这里传入的值是一个未知的类型，它可以是任何类型，并且该函数仍然可以运行。

function getTypeOf(value: mixed): string {
  return typeof value;
}

(二)、Any:

任意类型any使你可以避免类型检查。但这样做并不提倡，因为不安全。
即使是会导致运行时错误的代码也不会被Flow捕获：

只有几种情况可以考虑使用any：
你正在将现有代码转换为使用Flow类型检查的过程中，并且当前已阻止检查代码类型检查（你可能想先转换其他代码）。
你确定你的代码正常工作，但是由于某些原因，Flow无法正确工作。

/**
 * @flow
 */
function passAny (value: any) {
  value.substr(1)
  value * value
}
passAny('string')
passAny(100)

其他

Flow的官方API
关于查找Flow的API