代码改变世界

vue系列--- 认识Flow(一)

2019-10-29 18:34  龙恩0707  阅读(7166)  评论(1编辑  收藏  举报

1. 什么是Flow?

Flow 是javascript代码的静态类型检查工具。它是Facebook的开源项目(https://github.com/facebook/flow),Vue.js(v2.6.10的源码使用了Flow做了静态类型检查。因此我们现在先来了解下Flow的基本知识,有助于我们分析源码。
2. 为什么要用Flow?

javascript是弱类型语言,弱类型体现在代码中的变量会根据上下文环境自动改变的数据类型。那么这种弱类型有优点也有缺点,优点是我们容易学习和使用,缺点是:开发者经常因为赋值或传值导致类型错误。造成一些和预期不一样的结果。在代码编译的时候可能不会报错,但是在运行阶段就可能会出现各种奇怪的bug。因此在大型项目中我们有必要使用Flow来做代码静态类型检查。

下面我们从一个简单的demo说起。比如如下代码:

function add (x) {
  return x + 10;
}

var a = add('Hello!');
console.log(a); // 输出:Hello!10

如上代码,x这个参数,我们在add函数声明的时候,其实我们希望该参数是一个数字类型,但是在我们代码调用的时候则使用了字符串类型。导致最后的结果为 "Hello!10"; 为什么会出现这种结果呢?那是因为 加号(+)在javascript语言中,它既有作为数字的加运算符外,还可以作为字符串的拼接操作。

因此为了解决类型检查,我们可以使用Flow来解决。下面我们来介绍下 如何在我们项目中使用Flow。

3. 开始一个新的 Flow 项目

首先我们创建一个名为 v-project 项目:

$ mkdir -p v-project  
$ cd v-project

 接着,添加Flow, 执行如下命令:

$ npm install --save-dev flow-bin

如上安装完成后,我们需要在要执行静态检查文件的根目录下 执行一下命令:flow init.执行完成后,我们会发现我们根目录下多了一个 .flowconfig 文件。该文件的作用是: 告诉Flow在这个目录下文件开始检测。我们可以在该 .flowconfig 配置文件内可以进行一些高级配置,比如说仅包含一些目录, 或 忽略一些目录进行检测等操作。

现在在我们的项目下会有如下目录结构:

|--- v-project
| |--- node_modules
| |--- .flowconfig
| |--- package.json

package.json 文件基本代码如下:

{
  "name": "v-project",
  "devDependencies": {
    "flow-bin": "^0.106.3"
  }
}

现在我们在 v-project根目录下新建 index.js 文件,代码如下:

// @flow

var str = "hello world!";
console.log(str);

接着我们在项目的根目录下运行如下命令,如果一切正常的话,会提示如下信息:

$ flow check  
Found 0 errors

但是如果我们把代码改成如下所示; 它就会报错了,index.js 代码改成如下:

// @flow

var str != "hello world!";
console.log(str);

执行结果如下图所示:

注意第一行,我们添加了 // @flow, 是用来告诉 Flow,你需要检查我这个文件。如果不加这个注释,Flow就不会检查该文件了。
当然,我们可以强制 Flow 来检测所有的文件,不管文件有没有 @flow 注释,我们只需要在命令行中带上 --all 参数就行了,如下所示:

$ flow check --all

但是这个命令,我们一般情况下还是需要慎用的,当我们在一个大型项目中,该项目假如引入了很多第三方库,那么检测器可能会找到很多我们不想要的错误。

注意:flow check 这个命令虽然是可行,但不是最高效的用法,该命令会让flow每次都在项目下检查所有文件一遍。

4. 理解类型注释

Javascript是一种弱类型语言,在语法上没有规定明确的表示类型,比如如下JS代码运行是正常的。 

function add(num1, num2) {
  return num1 + num2;
}

var result = add(1, '2');
console.log(result); // 输出:12

如上代码,输出的 result 的值为 '12'; 但是有可能这并不是我们想要的,我们有可能想要两个数字相加得出结果,但是编写代码的时候,一不小心把参数写成字符串去了。导致预期的结果不一样。

Flow 可以通过静态分析和类型注释,来帮我们解决类似的问题,让我们的代码更加符合预期。

类型注释一般都是以 : 开头的,可以使用在方法参数中、变量声明及返回值中,比如使用类型注释更改上面的代码如下:

// @flow

function add(num1:number, num2:number) :number {
  return num1 + num2;
}

var result = add(1, '2'); 

执行命令后结果如下所示:

$ flow check
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ index.js:8:21

Cannot call add with '2' bound to num2 because string [1] is incompatible with
number [2].

 [2]  4│ function add(num1:number, num2:number) :number {
      5│   return num1 + num2;
      6│ }
      7│
 [1]  8│ var result = add(1, '2');
      9│ console.log(result); 

Found 1 error

如上代码,num1:number 和 num2:number 的含义是:num1 和 num2 传递的参数都为数字类型的,:number {} 中的 :number的含义是:希望返回结果也是数字类型。上面如果我们把 '2' 改成 数字 2 就正常了。

类型注释在大型复杂的项目文件中很有用,它能保证代码按照预期进行。

下面我们来看看Flow能支持的其他更多类型注释,分别为如下:

函数

// @flow

function add(num1:number, num2:number) :number {
  return num1 + num2;
}

add(1, 2); 

数组

// @flow

var foo : Array<number> = [1, 2, 3];

如上数组类型注释的格式是 Array<number>,number的含义表示数组中的每项数据类型都为 number(数字) 类型。

下面是类和对象的注释模型,在两个类型之前我们可以使用 或(|) 逻辑,变量foo添加了必须为Foo类的类型注释。

// @flow

class Foo {
  x: string;           // x 必须为字符串类型
  y: string | number;   // y 可以为字符串或数字类型
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
// 类实例化
var foo : Foo = new Foo("hello", 112);

对象字面量

对象字面量需要指定对象属性的类型即可。如下演示:

// @flow

class Foo {
  x: string;           // x 必须为字符串类型
  y: string | number;   // y 可以为字符串或数字类型
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

var obj : {a : string, b : number, c : Array<string>, d : Foo} = {
  a : "kongzhi",
  b : 1,
  c : ["kongzhi111", "kongzhi222"],
  d : new Foo("hello", 1)
}

Null

假如我们想任意类型 T 可以为null或undefined的话,我们只需要类似如下写成 ?T 的格式的即可。

// @flow

var foo : ?string = null;

如上代码,foo 可以为字符串,也可以为null。

5. 理解模块界限

在跨模块使用的时候,Flow需要明确注释,为了保证Flow在各自模块内的独立检测,提高性能,因此我们需要在每个模块中有自己的Flow.

在我们的 v-project 项目目录中新建一个 module.js, 整个目录结构假如变为如下:

|--- v-project
| |--- node_modules
| |--- index.js
| |--- module.js
| |--- .flowconfig
| |--- package.json

module.js 代码如下:

/*
* module.js
* @flow
*/

function module(str: string) : number {
  return str.length;
}

module.exports = module;

index.js 代码如下:

/*
 * index.js
 * @flow
*/

var module = require('./module');
var result = module(1122);

在命令行中运行发现报错,如下提示:

$ flow check
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ index.js:8:21

Cannot call module with 1122 bound to str because number [1] is incompatible with
string [2].

     index.js
      5│ */
      67│ var module = require('./module');
 [1]  8│ var result = module(1122);
      9│

     module.js
 [2]  7│ function module(str: string) : number {

Found 1 error

如果我们把 index.js 代码中的 module(1122); 改成 module('1122'); 字符串这样的,再运行下就不会报错了。
6. 使用Flow检测第三方库模块

大多数javascript应用程序都依赖于第三方库。如果在我们的项目代码中引用外部资源时,我们要如何使用Flow呢?庆幸的是,我们不需要修改第三方库源码,我们只需要创建一个库定义 (libdef). libdef是包含第三方库声明的JS文件的简称。

下面我们来演示下这个过程,假如我们选择了 lodash 库。下面我们的 index.js 代码中使用了该库。如下代码所示:

// @flow
import _ from 'lodash'; 

然后我们在命令行运行的时候 会报错如下信息:

$ flow check              
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ index.js:4:15

Cannot resolve module lodash.

 12│ // @flow
 34│ import _ from 'lodash'; 
 567│

Found 1 error

这是因为flow 找不到 lodash 模块,因此我们这个时候需要去下载 lodash 的模块文件,我们可以使用 flow-typed 来管理这些第三方库的定义文件。

1. flow-typed

flow-typed 仓库包含了很多流行的第三方库的定义文件。 flow-typed 可以看github代码(https://github.com/flow-typed/flow-typed) 

我们使用npm命令行方式全局安装下 flow-typed, 如下命令:

npm install -g flow-typed

安装成功后,我们需要查找该库,是否存在我们的 flow-typed 仓库中,如下命令查找下:

flow-typed search lodash;

运行命令完成后,我们就可以看到有如下版本的了。

Found definitions:
╔═══════════╤═════════════════╤══════════════════════╗
║ Name      │ Package Version │ Flow Version         ║
╟───────────┼─────────────────┼──────────────────────╢
║ lodash-es │ v4.x.x          │ >=v0.104.x           ║
╟───────────┼─────────────────┼──────────────────────╢
║ lodash-es │ v4.x.x          │ >=v0.63.x <=v0.103.x ║
╟───────────┼─────────────────┼──────────────────────╢
║ lodash    │ v4.x.x          │ >=v0.47.x <=v0.54.x  ║
╟───────────┼─────────────────┼──────────────────────╢
║ lodash    │ v4.x.x          │ >=v0.38.x <=v0.46.x  ║
╟───────────┼─────────────────┼──────────────────────╢
║ lodash    │ v4.x.x          │ >=v0.55.x <=v0.62.x  ║
╟───────────┼─────────────────┼──────────────────────╢
║ lodash    │ v4.x.x          │ >=v0.63.x <=v0.103.x ║
╟───────────┼─────────────────┼──────────────────────╢
║ lodash    │ v4.x.x          │ >=v0.104.x           ║
╟───────────┼─────────────────┼──────────────────────╢
║ lodash    │ v4.x.x          │ >=v0.28.x <=v0.37.x  ║
╚═══════════╧═════════════════╧══════════════════════╝

现在我们可以选择一个版本进行安装,我们需要在我们的项目根目录下运行如下命令:

flow-typed install lodash@4.x.x;

文件下载完成后,会自动在我们的项目根目录下 新建一个 flow-typed/npm 文件夹,在该文件夹下有一个 lodash_v4.x.x.js文件。

那么这个时候,我们再运行 flow check; 命令就不会报错了。

2. 自定义libdef

如果我们用的库在flow-typed仓库搜索不到怎么办?比如我引入了一个在flow-typed管理库中找不到的库,比如该库叫 "kongzhi" 库(但是在npm包中确实有该库),该库下有对外暴露的方法,比如叫 findWhere 这样的方法,我们在 index.js 中调用了该方法,并且该库的假如别名对外叫_; 如下代码: 

// @flow

var obj = [
  { title: 'kongzhi1111', flag: true },
  { title: 'kongzhi2222', flag: false }
];

function test() {
  return _.findWhere(obj, {flag: true});
}

因此 运行 flow check; 命令后,会报如下错误:

$ flow check
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ index.js:10:10

Cannot resolve name _.

  7│ ];
  89│ function test() {
 10│   return _.findWhere(obj, {flag: true});
 11│ }
 1213│

Found 1 error

如上代码报错,那是因为Flow不认识全局变量 _. ,要解决这个问题,我们需要为我们的 kongzhi库创建一个接口文件。
因此我们需要在我们项目中根目录下新建一个叫 "interfaces" 文件夹,在该文件夹下新建一个 'kongzhi.js' 文件,在该文件下代码如下所示:

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

declare var _: Kongzhi;

然后我们需要在我们的 根目录中的 .flowconfig 文件中配置 [libs] 为 interfaces/ 了, 如下所示:

[ignore]

[include]

[libs]
interfaces/

[lints]

[options]

[strict]

如上,在 .flowconfig 中默认有如上配置项。如上配置后,Flow就会查找 interfaces/目录下的所有 .js 文件作为接口定义。
有了该接口文件,我们在命令中再次运行下 就不会报错了。如下运行结果:

$ flow check
Found 0 errors

现在整个项目的目录结构变为如下:

|--- v-project
| |--- flow-typed
| | |--- npm
| | | |--- lodash_v4.x.x.js
| |--- interfaces
| | |--- kongzhi.js
| |--- node_modules
| |--- .flowconfig
| |--- index.js
| |--- module.js
| |--- package.json

更多的自定义 libdef,请查看(https://flow.org/en/docs/libdefs/creation/)。

 7. 剔除类型注释

类型注释不是我们JS规范的一部分,因此我们需要移除它,这里我们使用Babel来移除它。

比如我们的 module.js 中的代码,如下代码:

function module(str: string) : number {
  return str.length;
}

str: string 和 : number 它不是我们的JS规范中的一部分,因此不管我们在浏览器端还是在nodeJS中运行都会报错的。

为了简单的来测试下,我们在node.js中运行测试下,如下:

$ node module.js

function module(str: string) : number {
                   ^
SyntaxError: Unexpected token :
    at new Script (vm.js:80:7)
    at createScript (vm.js:264:10)
    at Object.runInThisContext (vm.js:316:10)
    at Module._compile (internal/modules/cjs/loader.js:670:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
    at Module.load (internal/modules/cjs/loader.js:605:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
    at Function.Module._load (internal/modules/cjs/loader.js:536:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:760:12)
    at startup (internal/bootstrap/node.js:303:19)

如上可以看到,会报错,在编程时,我们希望使用Flow对类型检查,但是在代码运行的时候,我们需要把所有的类型约束要去掉。因此我们需要使用Babel这个工具来帮我们去掉。

因此首先我们要安装babel相关的库,安装命令如下:

npm install --save-dev babel-cli babel-preset-flow

babel-cli: 只要我们要安装babel的话,那么babel-cli库都需要安装的。
babel-preset-flow: 该库目的是去除类型。

安装完成后,我们的 package.json 变成如下:

{
  "name": "v-project",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-flow": "^6.23.0",
    "flow-bin": "^0.106.3"
  },
  "scripts": {
    "flow": "flow check"
  }
}

为了项目结构合理及方便,我们把上面的 index.js 和 module.js 放到 src/js 目录里面去,因此目录结构变成如下:

|--- v-project
| |--- flow-typed
| | |--- npm
| | | |--- lodash_v4.x.x.js
| |--- interfaces
| | |--- kongzhi.js
| |--- node_modules
| |--- .flowconfig
| |--- src
| | |--- js
| | | |--- index.js
| | | |--- module.js
| |--- package.json
| |--- .babelrc

src/js/module.js 在剔除之前代码如下:

/*
* module.js
* @flow
*/

function module(str: string) : number {
  return str.length;
}

module.exports = module;

如上安装完成相应的库之后,我们需要在项目的根目录下新建 .babelrc 文件,添加如下配置:

{
  "presets": ["flow"]
}

我们现在在项目的根目录下运行如下命令,就可以在项目的根目录生成 dist/js 文件夹,该文件夹下有index.js和module.js文件,如下命令:

./node_modules/.bin/babel src -d dist

然后我们查看 dist/js/module.js 代码变成如下:

/*
* module.js
* 
*/

function module(str) {
  return str.length;
}

module.exports = module;

我们也可以在node命令行中测试:$ node dist/js/module.js  后也不会报错了。

8. Flow类型自动检测

如上我们虽然使用了Babel去除了Flow的类型注释,但是我们并没有对Flow的静态类型检测。因此如果我们想让babel进行Flow的静态类型校验的话,那么我们需要手动集成另外一个插件--- babel-plugin-typecheck。
想了解更多相关的知识, 可以看npm库(https://www.npmjs.com/package/babel-plugin-typecheck)。 

接下来我们需要进行具体的babel集成步骤,因此我们需要安装 babel-plugin-typecheck 插件。如下命令:

npm install --save-dev babel-plugin-typecheck

当然我们要全局安装下 babel-cli; 如下命令:

npm install -g babel-cli

接下来,我们需要在我们的 .babelrc 中添加 typecheck 插件进去,如下所示: 

{
  "presets": ["flow"],
  "plugins": ["typecheck"]
}

现在我们就可以使用babel来编译我们的Flow代码了。如下命令所示:

$ babel src/ -d dist/ --watch

src/js/index.js -> dist/js/index.js
src/js/module.js -> dist/js/module.js

现在我们把 src/js/module.js 中的代码改成如下:

/*
* module.js
* @flow
*/

function module(str: string) : number {
  return str.length;
}

var str != "hello world!";
console.log(str);

module.exports = module;

然后我们保存后,在命令行中会看到如下报错信息:

可以看到,我们使用babel就可以完成了校验和编译的两项工作。再也不用使用 flow check; 这样的对全局文件进行搜索并检测了。
我们使用了 babel 的 --watch 功能解决了之前 Flow命令不能同时监听,提示的缺憾了。

babel的缺陷:

但是使用 babel 也有缺陷的,比如我们现在把 src/js/module.js 代码改成如下:

/*
* module.js
* @flow
*/

function module(str: string) : number {
  return str.length;
}

function foo(x : number) :number {
  return x * 12;
}

foo('a');

module.exports = module;

如上代码,我们添加了一个foo函数,有一个参数x,我们希望传递的参数为 number 类型,并且希望返回的值也是 number 类型,但是我们在 foo('a'); 函数调用的时候,传递了一个字符串 'a' 进去,babel 在检测的时候并没有报错,这或许是它的缺陷。

但是我们在 flow check; 就会报错如下:

9. 了解 .flowconfig 配置项 

我们在项目中的根目录运行命令:flow init; 会创建 .flowconfig文件,该文件的作用是告诉Flow在这个目录下开始检测。不过 .flowconfig配置项也提供了一些配置选项,告诉Flow哪些文件需要检测,哪些文件不需要检测。

.flowconfig 默认有如下配置(我们讲解前面三个比较常用的配置项):

[ignore]

[include]

[libs]

[lints]

[options]

[strict]

1. [ignore] 该配置是用来告诉flow哪些文件不需要检测,默认为空,所有的文件需要检测。我们也可以使用正则去匹配路径,哪些路径不需要进行检测。

[ignore]
.*/src/*

如上表示的含义是:在src目录下的所有文件不需要检测,因此如果src下有某个js文件是不对的类型,也不会报错的。

2. [include] 该配置是用来告诉Flow还要检测哪些文件或者目录。该配置的每一行表示一个待检测的路径,我们可以使用相对于根目录下的路径,或者绝对路径,或支持一个或多个星号通配符。比如如下:

[include]
../xx.js
../xxxDir/
../xxxDir/*.js

注意:如果 [ignore] 和 [include] 同时存在,并且同时匹配同个路径,那就看那个配置在后面,那个优先级就更高。

3. [libs]

该配置下一般存放第三方接口文件,当我们引用第三方库文件后,我们需要声明一个接口文件,我们可以放在该目录下。比如:

[libs]
interfaces/

Flow就会查找 interfaces/目录下的所有 .js 文件作为接口文件的定义。

如上就是Flow一些基本的知识了解下即可。