flow类型检查 - HelloWorld开发者社区

学习目的

减少隐晦的 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/