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里的东西全部删掉才能检查。。。
总的来说、用起来很不方便