flow类型检查

学习目的

• 减少隐晦的 bug，让代码更加符合预期
• 轻量级的 js 类型检测，能快速上手和应用

安装

1. 需要安装 babel 来转义flow 语法

1. yarn add --dev @babel/core @babel/cli @babel/preset-flow

2. 在根目录创建.babelrc 文件 设置内容

{"presets": ["@babel/preset-flow"]
}

2. 安装flow

yarn add --dev flow-bin

3. 启动 flow 后台服务

flow

// 暂停 flow stop

4. 初始化项目

flow init

5. 在需要执行类型检测的 js 文件顶部加入// @flow

// @flow

function foo(x: ?number): string {if (x) {return x;}
  return "default string";
}

部分语法

支持 7 中数据类型的检测

Boolean、NUll、Undefined、Number、String、Object、Symbol

注意大小写

// 案例 1
// @flow

function check(x: number, y: string, z: boolean) {//...}

method(1, "test", true)

// 案例 2

// @flow
function method(x: Number, y: String, z: Boolean) {// ...}

method(new Number(1), new String("test"), new Boolean(true))

以上案例区分大小写，小写的 number 是原始类型，而大写的 Number 是 JavaScript 的构造函数，是对象类型的

可选类型

// @flow
function acceptsMaybeString(value: ?string) {// ...}

acceptsMaybeString("bar");     // Works!
acceptsMaybeString(undefined); // Works!
acceptsMaybeString(null);      // Works!
acceptsMaybeString();          // Works!

可选对象属性

{propertyName?: string} 
// 和 ts 类似

可选的函数参数

// @flow
function func(value?: string) {// ...}
// @flow
function acceptsObject(value: { foo?: string}) {// ...}
acceptsObject({foo: "bar"}); // Works!
acceptsObject({foo: undefined}); // Works!
acceptsObject({foo: null}); // Error!
acceptsObject({}); // Works!

文字类型

function foo(value: 2) {}

foo(2); // Work!
foo(3); // Error!
foo('2'); // Error!

混合类型

// @flow
function stringify(value: mixed) {
  // $ExpectError
  return "" + value; // Error!
}

stringify("foo");

另外还有 数组类型:Array；接口类型：interface；任意类型：any

类型注解

并非什么情况下都需要 将类型写的注解的很详细

比如

/* @flow */
function add(num1, num2) {return num1 + num2;}
var x = add(3, '0');
console.log(x);

这种情况，flow也是会起检测作用, 非强校验

第三方库

.flowconfig 中增加

[libs]
interfaces/

需要在 interfaces 目录下面为第三方库写一些接口定义

// flow 会检查 interfaces 下 所有的 js 文件

// 例如 Underscore

declare class Underscore {findWhere<T>(list: Array<T>, properties: {}): T;
}

declare var _: Underscore;

// 不然引用的时候会报错
// underscore_example.js:11:10,10: unknown global name: _

.flowconfig 其他配置

[include] 指定需要检查的目录或者文件

[include]
../externalFile.js
../externalDir/
../otherProject/*.js
../otherProject/**/coolStuff/

[ignore] 忽略文件或者文件夹

.*/__tests__/.*
.*/src/\(foo\|bar\)/.*
.*\.ignore\.js

注意
[ignore] 在 [include] 之后，如果同时 include 和 ignore 同个路径，那么就会 ignore

参考：

【1】https://zhenyong.github.io/fl…

【官网】https://flow.org/en/docs/