Vue项目中使用flow做类型检测

首先，安装flow

npm i flow-bin --save-dev

然后在package.json中添加脚本

"scripts": {
    "flow": "flow check"
  }

在项目根目录下运行命令，生成文件.flowconfig

npm run flow init

打开 .flowconfig 文件，可以看到内容大致如下

.*/node_modules/.*
.*/test/.*
.*/build/.*
[include]
[libs]
[lints]
[options]
module.file_ext=.vue 
module.file_ext=.js
[strict]

其中在[ignore]下配置要忽略的文件，在[options]中我们可以添加
module.file_ext=.vue 这样的配置让flow检测vue单文件组件

然后，在需要flow进行类型检测的.js文件或.vue文件script标签内容最顶部，加上注释

// @flow

没有该注释对文件将不会进行类型检测
配置到到这里，我们可以运行 npm run flow 进行代码到类型检查，获取检查报告。

由于类型注释不是我们ES规范的一部分，因此我们需要把使用了flow的代码转换成正常的js代码，可以使用babel-preset-flow或babel-plugin-transform-flow-strip-types来移除它。

安装flow相关的flow插件：
babel-cli: babel-cli脚手架
babel-preset-flow: 用于编译前去除代码中的类型声明
babel-plugin-transform-flow-strip-types 同上，而选一

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

安装完后，在项目根目录的.babelrc文件(无则创建)里添加如下内容

{
 "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2",
    "flow"
  ],
  "plugins": [
    //"babel-plugin-transform-flow-strip-types"
  ]
}

如果想要在代码中实时看到flow类型检查的错误，需要安装eslint插件

npm i eslint-plugin-flowtype-errors --save-dev

然后在.eslintrc文件中添加配置：

 {
  plugins: [
    'flowtype-errors'
  ],
  rules: {
    "flowtype-errors/show-errors": 2
  }
}

PS:在vscode中进行类型声明时可能会报"类型声明只能在.ts文件中使用"的错误，这时候找到setting,搜索javascript.validate,将其禁用即可

参考文章：Writing Vue.js Components with Flow