vue2.0项目配置flow类型检查

在vue2.0的项目中加入flow类型检查。当前项目是用js写的，当项目愈来愈大，因为js弱类型的特性，相比ts(typescript)这种强类型的语言而言，后期维护会愈来愈困难。为了解决这个问题，决定使用flow 加入类型检查。

1、flow了解

flow是fackbook公布的javascript静态类型检查器。 能够检查js中一些bug，eg：自动类型转换中出现的问题。flow官网

引用flow官网的介绍

flow is a static type checker for javascript

flow初体验

// @flow
let a:number = 2;
function foo(b:tring):boolean{
    return false;
}

使用bebel转换后

let a = 2;
function foo(b){
    return false;
}

从上面代码能够看出，使用flow后的代码更清晰明了。虽然使用注释也能够实现，但使用注释太繁琐，并且不直观。

2、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-preset-flow

在babel配置文件.babelrc中加入

{
  "presets": ["flow"]
}

3、flow使用

配置flow

• 一、npm run flow init生成flow配置文件.flowconfig 官网配置传送门

个人配置文件

[ignore]
.*/node_modules/.*
.*/test/.*
.*/build/.*
.*/config/.*
[include]

[libs]

[options]
module.file_ext=.vue 
module.file_ext=.js

• 二、新建一个文件index.js

// @flow 
let a:number = '3';

// @flow或者 /* @flow */告诉flow检查这个文件
输入npm run flow 执行类型检查

注：在vue单文件组件使用flow须要额外配置

• 一、在.flowconfig文件的[options]中配置.vue文件扩展名

module.file_ext=.vue

• 二、在.vue文件中需注释掉template script styled标签
  参考链接：

  • How to get Flow to properly work with Vue 2 (webpack)?

  • Support HTML files

/* @flow
<template>
  <div>
  </div>
</template>
*/
// <script>
  let a:string = 2;
  console.log(a);
  export  default {
    data(){
      return {
       
      }
    }
  }
// </script>
/*
<style scoped>
</style>
*/

注意：
一、 在注释template和style时使用/**/注释，在template和style内部不能再使用 /* */这种注释，这个不是flow不识别，原本就不该改/**/中嵌套/**/,应该在/**/中采用 // 注释风格
二、若是不想在.vue中使用注释的方法，能够在ide中安装flow，可是不能使用npm run flow来检查了。

webstorm中配置flow

配置webstorm，使其支持flow语法。官网ide配置

总结一下为3点：

• 一、安装node包

• 二、全局安装flow

• 三、在框架设置中选择JavaScript flow

---

以上是我在vue2.0项目安装flow的所有过程。

参考文章：

• Flow教程（一） - 简介和开始

• Writing Vue.js Components with Flow