前端进阶（5） - js 扩展：静态类型检查（facebook flow）

摘要：扩展静态类型检查语言与系列等语言有一点很大的不同，就是语言是弱类型语言。但其实很多开发人员还是比较喜欢用来开发项目，所以开发出来帮助语言扩展静态类型检查功能，规避上面提到的问题。

js 语言与 java、C 系列等语言有一点很大的不同，就是 js 语言是弱类型语言。js 语言的这个特性可能让大家觉得 js 很自由，没有强制性的约束，但是当遇到大型项目的时候，js 的这个特性就会变得比较麻烦，因为这会导致团队的代码很不可控。这个原因也是促使 TypeScript 诞生的一个很重要的原因。

但其实很多开发人员还是比较喜欢用 js 来开发项目，所以 facebook 开发出 flow 来帮助 js 语言扩展静态类型检查功能，规避上面提到的问题。

flow 规定，在需要做 "flow 静态类型检查" 文件的开头加上 // @flow 这段注释，让工具识别这个文件需要做静态类型检查，否则就会当作一般 js 文件对待，不做静态类型检查。

flow 静态类型几乎可以应用到所有的 js 对象，包括 es6 扩展的 class, module 等，也包括 jsx 语法。

以下是一些基础的静态类型举例，更详细的可以查看 Type Annotations | Flow.

与 js 的基本数据类型类似，包括:

boolean: 对应 js 的 Boolean 类型

number: 对应 js 的 Number 类型

string: 对应 js 的 String 类型

null: 对应 js 的 null

void: 对应 js 的 undefined

正常的 js 代码

let hello = "hello"; // 声明一个变量

hello = 2 * 2; // 重新赋值

hello = []; // 重新赋值

加上 flow 静态类型检查扩展的代码

// @flow

let hello: string = "hello"; // 声明一个 string 类型的变量

hello = 2 * 2; // 报错

hello = []; // 报错

hello = "hi"; // 重新赋值

正常的 js 代码

function plus(a, b) {
  return a + b;
}

plus(); // NaN
plus(1); // NaN
plus(1, 2); // 3
plus("hello"); // "helloundefined"
plus("hello", " hi"); // "hello hi"
plus({}, {}); // "[object Object][object Object]"

加上 flow 静态类型检查扩展的代码

// @flow

// 定义一个 "两个数字参数，返回值也是数字" 的函数
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus("hello"); // 报错
plus("hello", " hi"); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

可能（Maybe）类型用一个 ? 在类型前面表示，包含类型本身、null、undefined

// @flow

let hello: ?string; // 声明一个数据类型可以是 string, null, undefined 的变量

hello = null; // 赋值
hello = undefined; // 重新赋值
hello = "hello"; // 重新赋值
hello = 1; // 报错
hello = true; // 报错

可选（Optional）类型一般用于对象属性或者函数参数，在名称后面加一个 ?，包含类型本身、undefined

// @flow

const obj: {hello? : string}; // 属性 hello 可以是 string, undefined

obj = {}; // 赋值
obj = {hello: undefined}; // 重新赋值
obj = {hello: "hello"}; // 重新赋值
obj = {hello: null}; // 报错
obj = {hello: 1}; // 报错
obj = {hello: true}; // 报错

// 属性 param 可以是 number, undefined
function method(param?: number) { /* ... */ }

method(); // 正常
method(undefined); // 正常
method(1.12); // 正常
method(null); // 报错
method("hello"); // 报错

语义（Literal）类型一般用于声明某个，某几个特定的值（多个值用 | 分隔）

// @flow

let hello: "hello"; // 声明一个只能赋值 "hello" 的变量

hello = "hello"; // 赋值
hello = "hi"; // 报错
hello = 12; // 报错
hello = undefined; // 报错
hello = null; // 报错

function method(param: 1 | "hi" | boolean): void { /* ... */ }

method(); // 报错，缺少参数
method(1); // ok
method(1.2); // 报错，类型不对
method("hi"); // ok
method("hello"); // 报错，类型不对
method(true); // ok
method(false); // ok

混合（Mixed）类型是指任意数据类型

// @flow

let hello: mixed; // 声明一个 mixed 类型的变量

hello = "hello"; // 赋值
hello = "hi"; // 重新赋值
hello = 12; // 重新赋值
hello = undefined; // 重新赋值
hello = null; // 重新赋值

数组

// @flow

let arr1: Array = [true, false, true]; // 声明一个元素是 boolean 的数组
arr1 = [true, 1]; // 报错，1 不是 boolean 值
arr1 = [""]; // 报错，"" 不是 boolean 值

let arr2: Array = ["A", "B", "C"]; // 声明一个元素是 string 的数组

let arr3: Array = [1, true, "three"] // 声明一个元素是任意类型的数组
arr1 = [true, 1]; // 重新赋值 
arr1 = [""]; // 重新赋值

map

// @flow

// 声明一个 map 类型，其有一个名为 foo，类型 boolean 的子元素
let obj1: { foo: boolean } = { foo: true };
obj1 = {}; // 报错，缺少 foo 这个属性值
obj1 = {foo: 1}; // 报错，属性值 foo 的类型必须是 boolean
obj1 = {foo: false, bar: "hello"}; // 重新赋值

// 声明一个 map 类型，其有名为 foo, bar, baz，类型 number, boolean, string 的子元素
let obj2: {
  foo: number,
  bar: boolean,
  baz: string,
} = {
  foo: 1,
  bar: true,
  baz: "three",
};

更静态类型可以查看 Type Annotations | Flow.

安装

# 全局安装
npm i -g flow-bin

# 本地安装
npm i -D flow-bin

使用

flow init                       # 初始化项目

flow check path/to/dir          # 检查这个目录下所有的文件
flow check path/to/js/file      # 检查指定文件

因为 flow 静态类型只是对 js 的扩展，并不是 js 原生支持的，也不能直接运行，所以，一般 flow 都是配合 babel 一起使用的，这样就可以在程序运行的时候进行静态类型检查，达到我们想要的效果。

安装 babel-preset-flow，这样 babel 在转码 js 文件时就能识别 flow 的语法。

npm i -D babel-preset-flow

.babelrc

{
  "presets": ["flow"]
}

源文件（flow）

// @flow

// 定义一个 "两个数字参数，返回值也是数字" 的函数
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus("hello"); // 报错
plus("hello", " hi"); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

转码后的文件

// 定义一个 "两个数字参数，返回值也是数字" 的函数
function plus(a, b) {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus("hello"); // 报错
plus("hello", " hi"); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

一般会在开发环境下，使用 babel-plugin-flow-runtime 插件，这样就可以在开发的时候，实时检查数据类型，就像原生的运行 flow 静态类型检查一样。（一般在产品环境不会使用这个功能，因为会额外消耗 js 的性能）

npm i -D babel-plugin-flow-runtime flow-runtime

.babelrc

{
  "presets": ["flow"],
  "plugins": ["flow-runtime"]
}

源文件（flow）

// @flow

// 定义一个 "两个数字参数，返回值也是数字" 的函数
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus("hello"); // 报错
plus("hello", " hi"); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

转码后的文件

import t from "flow-runtime";


// 定义一个 "两个数字参数，返回值也是数字" 的函数
function plus(a, b) {
  return a + b;
}

t.annotate(plus, t.function(t.param("a", t.number()), t.param("b", t.number()), t.return(t.number())));
plus(); // 报错
plus(1); // 报错
plus("hello"); // 报错
plus("hello", " hi"); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

这个时候，js 文件就会导入 flow-runtime 模块，对 plus 函数的参数 a, b 和返回值进行数据类型检查，如果不符合数据定义，就会报错。

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）