vue项⽬配置使⽤flow类型检查的步骤
你是否经常在debug那些简单可避免的bug？可能你给函数传参的时候搞错了参数的顺序，或者本来应该传个Number类型的参数，你传了⼀个String类型？JavaScript的弱类型是这⼀类bug的罪魁祸⾸，静态类型语⾔中不存在此类bug。Flow就是JavaScript的静态类型检查⼯具，该库的⽬标在于检查JavaScript中的类型错误，开发者通常不需要修改代码即可使⽤，故使⽤成本很低。同时，它也提供额外语法⽀持，使得开发者能更⼤程度地发挥Flow的作⽤。
⼀、flow的安装
flow可以直接通过npm或者yarn安装。
这⾥以npm为例：npm install --save-dev flow-bin
安装完成后在package.json中加⼊下⾯的脚本
"scripts": {
"flow":"flow check"
}
同时还要安装babel编译器，将flow的类型检查代码从代码中剥离，转变成正常的js代码
npm install --save-dev babel-cli babel-pret-flow
在babel配置⽂件.babelrc中加⼊
{
"prets": ["flow"]
}
⼆、flow使⽤
1、配置flow
npm run flow init⽣成flow配置⽂件.flowconfig
[ignore]
.*/node_modules/.*
.
*/test/.*
.*/build/.*
.*/config/.*
[include]
[libs]
lightbox
[options]
module.file_ext=.vue
module.file_ext=.js
[ignore]：Flow 默认检查项⽬⽬录下所有⽂件，但是有很多⽂件必定是我们不想检查的，就像 node_modules、build 等⽬录下的⽂件，所以我们需要在将这些⽬录写在 ignore 配置下。
[include]：所谓的项⽬⽬录其实是 .flowconfig ⽬录，并不是真正的项⽬⽬录，如果我们在这个项⽬中的某个⽬录下创建⼀个.flowconfig，那么 .flowconfig 所在的⽬录也会变为⼀个 Flow 项⽬。那么，如
果我们想对当前 Flow 项⽬以外的⽂件或者⽬录进⾏检查，需要把它们写在 include 配置项中。
[libs]：在项⽬中，我们可能会⽤到很多⾃定义的类型，⽐如说要记录对象的结构，它可能在每个⽂件中都会被运⽤到，我们将其抽取为全局的类型或数据结构，在任何⽂件都可以使⽤。为了管理⽅便，我们将全局类型都定义在⼀个或多个单纯的⽬录中统⼀管理。这⾥存放的有可能是⼀个定义好的数据结构，存放的也有可能是根据项⽬中某个类对应的数据类型。我们将这些⽂件或⽬录写在 libs 配置项中，这个配置对于我们使⽤ Flow 来说很重要。
[options]：这⾥填写对 Flow 项⽬的⼀些配置，配置项以key=value的形式，每⾏写⼀个。所有的配置见官⽅⽂档[lints]：官⽹中没有提到 lints 相关的配置
2、新建⼀个⽂件index.js
// @flow
let a:number = '3';
// @flow或者 /* @flow */，告诉flow检查这个⽂件
如果不愿意那么⿇烦，想检查全部⽂件，那么可以修改配置⽂件.flowconfig，在[options]配置项中添加 all=ture。
nowitzki
[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就会基于这些注释来评估
通过代码推断：通过变量的使⽤上下⽂来推断出变量类型，然后根据这些推断来检查类型
第⼀种⽅式，我们需要额外编写只在开发阶段起作⽤的代码，最后在代码编译打包的阶段被剔除。
显然，这种额外添加类型注释的⽅式增加了⼯作量。
misswhite怎么读英语 第⼆种⽅式，不需要任何代码修改即可进⾏类型检查，最⼩化开发者的⼯作量。它不会强制你改变开发习惯，因为它会⾃动推断出变量的类型。这就是所谓的类型推断，Flow最重要的特性之⼀。
我们来通过⼀个例⼦来说明这个特性：
浣溪沙欧阳修/*@flow*/
function foo(x) {
return x.split(' ');
}
foo(34);
当你在终端运⾏npm run flow命令的时候，上述代码会报错，因为函数foo()的期待参数是字符串，⽽我们输⼊了数字。错误信息类似如下:
index.js:4
4: return x.split(' ');
^^^^^ property `split`. Property not found in
4: return x.split(' ');
^ Number
上述信息清楚地指出了出错位置和错误原因。我们只要将参数变成字符串，即可修正错误。该例想说明的是，因为split()⽅法只适⽤于string类型的变量，所以x应该是string，这就是类型推断。
四、空类型
Flow处理null的⽅式与其他类型库不同。它不会忽略null，这样可以防⽌了因给变量传了null⽽导致程序崩溃的错误。
/*@flow*/
function stringLength (str) {
return str.length;
}
var length = stringLength(null);
Flow会报错。为了防⽌出错，我们需要单独处理null。
/*@flow*/
function stringLength (str) {
if (str !== null) {
return str.length;
}
return 0;
}
var length = stringLength(null);
代码中我们引⼊对null的检查，确保代码能在任何情况下都正常且正确运⾏。上述代码可以通过Flow的类型检查。
五、类型注释
如上所述，类型推断是Flow最有⽤的特性之⼀，不需要编写类型注释就能获取有⽤的反馈。但在某些特定的场景下，添加类型注释可以提供更好更明确的检查依据。考虑以下代码：
/*@flow*/
function foo(x, y){
return x + y;
}
foo('Hello', 42);
Flow检查上述代码时检查不出任何错误，因为+即可以⽤在字符串上，也可以⽤在数字上，我们并没有明确指出add()的参数必须为数字。
在这种情况下，我们可以借助类型注释来指明期望的类型。类型注释是以冒号：开头，可以在函数参数，返回值，变量声明中使⽤。如果我们在上段代码中添加类型注释，就会变成如下：
/*@flow*/
function foo(x : number, y : number) : number {
return x + y;
}
foo('Hello', 42);
现在Flow就能检查出错误，因为函数参数的期待类型为数字，⽽我们提供了字符串。Flow报错信息类似如下：
index.js:7
7: foo('Hello', 42);
^^^^^^^ string. This type is incompatible with the expected param type of
3: function foo(x : number, y : number) : number{
^^^^^^ number
如果传⼊的参数是数字，就不会有错误。类型注释在⼤型复杂的JavaScript⽂件中也很有⽤，它能保证代码按照预期进⾏。
六、Flow能⽀持的其他更多类型注释。
其实说到底就是类似java那种强语⾔类型的写法，给每个变量声明是什么类型，给每个函数声明返回值类型，给每个数组元素声明类型等，就是仿造java的写法，哈哈，java传值不对时就会给你报错⼀样的道理
1、函数
/*@flow*/
function add(x : number, y : number) : number {
return x + y;
}
add(3, 4);
上述代码展⽰了变量类型注释以及函数类型注释。函数add()的参数，以及函数的返回值，期待类型为数字。如果传⼊其他类型参数，Flow就会检测到错误。
2、数组
var foo : Array<number> = [1,2,3];
数组类型注释的格式是Array<T>，T表⽰数组中每项的数据类型。在上述代码中，foo是每项均为数字的数组。
3、类
下⾯展⽰了类和对象的类型注释模型。唯⼀需要注意的是，可以在两个类型之间使⽤或逻辑，⽤|来间隔。变量bar1添加了必须为Bar类的类型注释。
class Bar{随身
great wayx:string; // x should be stringnavarch
y:string | number; // y can be either a string or a number
constructor(x,y){initiatives
this.x=x;
this.y=y;
}
}
var bar1 : Bar = new Bar("hello",4);
4、对象字⾯量
对象的类型注释类似于类，指定对象属性的类型。
var obj : {a : string, b : number, c: Array<string>, d : Bar} = {
a : "hello",
b : 42,
c : ["hello", "world"],
d : new Bar("hello",3)
}
5、Null
若想任意类型，T可以为null或者undefined，只需类似如下写成 ?T 的格式即可。
/*@flow*/
var foo : ?string = null;
此时，foo可以为字符串，也可以为null。
⽬前我们只对Flow的类型注释做了很浅的探索。⼀旦你习惯了使⽤这些基本类型，建议在Flow官⽹上的类型⽂档深⼊了解所有的类型。
七、库定义
我们经常需要引⼊第三⽅库，Flow检查时就会抛出错误。但这并不是我们期待的错误。
庆幸的是，我们不需要修改库源码去防⽌这些报错。我们只需创建⼀个库定义（libdef）。libdef是包含第三⽅库声明的JS⽂件简称。观察下⾯的例⼦：
/* @flow */
var urs = [
{ name: 'John', designation: 'developer' },
{ name: 'Doe', designation: 'designer' }
];
function getDeveloper() {
return _.findWhere(urs, {designation: 'developer'});
}
Flow会检查出以下错误：
interfaces/app.js:9
9: return _.findWhere(urs, {designation: 'developer'});
^ identifier `_`. Could not resolve name
由于Flow并不认识_，所以会报错。要解决这个问题，我们需要引⼊Underscore的库定义
1、使⽤flow-typed
flow-typed仓库包含了众多流⾏的第三⽅库的libdef。只需在项⽬根⽬录下创建⼀个名为flow-typed的⽂件夹，并且下载相关的定义⽂件即可。为了进⼀步简化，可以⽤npm的命令⾏⽅式⼀键获取和安装libdef⽂件：npm install -g flow-typedirma
安装成功之后，运⾏flow-typed install来检查package.json⽂件，并且下载所有项⽬中⽤到的第三⽅库的libdef。
2、⾃定义libdef
全外教 如果你⽤的库并不在flow-typed仓库，你可以创建你⾃⼰的libdef。本⽂不会细谈⾃定义libdef，因为很少会有⼈遇到，感兴趣可以查看此⽂档。
⼋、剔除类型注释
由于额外添加的类型注释不是正确的JavaScript语法，打包编译的时候需要在源码中剔除。可以通过flow-remove-types来剔除，或者如果你已经⽤Babel来转译JS，你可以使⽤Babel pret来移除。我们只讨论第⼀种⽅法。
⾸先需要安装flow-remove-types作为项⽬依赖库：npm install --save-dev flow-remove-types
然后在package.json⽂件中添加另⼀个script⼊⼝：
"scripts": {
"flow": "flow",
"build": "flow-remove-types src/ -D dest/",
}
上述命令将剔除src⽂件夹下的所有类型注释，在dist⽂件夹中保存编译后的版本。编译后的⽂件就是普通的能运⾏于浏览器的JavaScript⽂件。
到此这篇关于vue项⽬配置使⽤flow类型检查的步骤的⽂章就介绍到这了，更多相关vue flow类型检查内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
