vue项目配置使用flow类型检查的步骤

2020-06-16 06:43:20易采站长站整理


// @flow
let a:number = '3';
// @flow或者 /* @flow */,告诉flow检查这个文件

如果不愿意那么麻烦,想检查全部文件,那么可以修改配置文件.flowconfig,在[options]配置项中添加 all=ture。


[ignore][include][libs][options]all=true
[lints]

[libs] 配置项中的文件不需要添加// @flow,它们都将被检查。

注:在vue单文件组件使用flow需要额外配置:

(1)在.flowconfig文件的[options]中配置.vue文件扩展名,module.file_ext=.vue

(2)在.vue文件中需注释掉template script styled标签

输入

npm run flow 
执行类型检查。

注:完成设置之后,在终端输入以下命令可以在你的项目根目录以及任何子目录文件夹下进行专门的类型检查:npm run flow check,但是,这并不是最高效的使用方式,因为每次Flow都会重新检查整个项目的所有文件。开发过程中,推荐启动Flow服务:Flow服务的工作方式是增量检查,也就是说它只检查变化的部分。在终端输入以下命令来启动Flow服务:npm run flow,首次运行该命令时,服务启动并且显示最初类型检查结果。这保证了Flow更高效的增量式工作流。然后接下来每次想要知道检测结果,只要输入flow命令即可。开发结束之后,输入npm run flow stop停止服务。

Flow的类型检查是可选的,并不需要一次性检查所有代码。你可以选择你想要检查的文件,只要在对应的JavaScript文件最前面加上带有@flow标识的注释即可:/*@flow*/,当你想在已有项目中加入Flow的时候,该特性特别有帮助。因为你可以一一选择并检测你要的文件,然后修正错误。

三、类型推断

  通常,类型检查分为以下两种方式:

  通过注释:事先注释好我们期待的类型,Flow就会基于这些注释来评估

  通过代码推断:通过变量的使用上下文来推断出变量类型,然后根据这些推断来检查类型

  第一种方式,我们需要额外编写只在开发阶段起作用的代码,最后在代码编译打包的阶段被剔除。显然,这种额外添加类型注释的方式增加了工作量。

  第二种方式,不需要任何代码修改即可进行类型检查,最小化开发者的工作量。它不会强制你改变开发习惯,因为它会自动推断出变量的类型。这就是所谓的类型推断,Flow最重要的特性之一。

  我们来通过一个例子来说明这个特性:


/*@flow*/
function foo(x) {
return x.split(' ');
}

foo(34);

  当你在终端运行npm run flow命令的时候,上述代码会报错,因为函数foo()的期待参数是字符串,而我们输入了数字。错误信息类似如下: