1,

npm install --save-dev @babel/core @babel/cli @babel/preset-flow

npm install --save-dev flow-bin

3.项目根目录新建.babelrc文件,写入

{
  "presets": ["@babel/preset-flow"]
}

4，运行

npm run flow init

在项目根目录自动生成.flowconfig写入规则：

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

[libs]

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

5，在想要做类型检测的js文件头部添加

// @flow

然后运行

npm run flow check

就会开始检测添加了// @flow的文件

没有问题的就是

image.png

有问题就会告诉你哪里有问题

image.png

可以配合插件（vscode），随时提示错误，不用每次都运行npm run flow check

image.png

6、剔除类型注释
　　由于额外添加的类型注释不是正确的JavaScript语法，打包编译的时候需要在源码中剔除。可以通过flow-remove-types来剔除，或者如果你已经用Babel来转译JS，你可以使用Babel preset来移除。我们只讨论第一种方法。

首先需要安装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文件。


缺点：
1,每次写完代码都要运行命令行 npm run flow check才能检查文件 
2，为了解决上面的问题安装一个插件，但是插件不准确，type定义的类型，使用时缺失却不报错
3，.vue文件要把template、script、style里的东西全部删掉才能检查。。。
总的来说、用起来很不方便