vue项目中加入flow类型校验

环境配置（npm + babel）

• 安装 flow

npm install --save-dev flow-bin

• 安装完成后在package.json中加入下面的脚本

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

• 同时还要安装babel编译器，将flow的类型检查代码从代码中剥离，转变成正常的js代码

npm install --save-dev \
      babel-cli \
      babel-preset-flow \
      babel-plugin-transform-class-properties \
      babel-plugin-syntax-flow \
      babel-plugin-transform-flow-strip-types 

• 在babel配置文件.babelrc中加入

{
  "presets": [
    "flow"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties",
    "babel-plugin-syntax-flow",
    "babel-plugin-transform-flow-strip-types"
  ]
}

使用 flow

• 生成flow配置文件.flowconfig

npm run flow init

• 在 .flowconfig 中加入一些配置，因为 flow 默认不识别 .vue

[ignore]
.*/node_modules/.*
.*/test/.*
.*/build/.*
.*/config/.*
[include]
[libs]
[options]
module.file_ext=.vue
module.file_ext=.js
module.file_ext=.jsx

在vue 组件中使用

• 在vue中，有 template、style、script，flow 不识别，所以需要如下处理

/* @flow

<style scoped>
h1, h2 {
font-weight: normal;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 10px;
}

a {
color: #42b983;
}
</style>
<template>
<div class="hello">
<input v-model="userVal" @input="onChangeValue" />
</div>
</template>
*/

//<script>
export default {
  name: 'hello',
  data () {
    return {
      userVal: '',
      value: ''
    }
  },
  methods: {
    onChangeValue (event: Object) {
      let val = this.userVal
      this.value = this.fnPipe(val);
      return this.value
    },
    fnPipe (val: string): number {
      return Number(val)
    },
  }
}
//</script>

在webpack 中使用 flow 检查

• 安装一个 flow 的 webpack 插件

npm install --save-dev flow-webpack-plugin

• 配置到 webpack

// 默认情况下，是调用的 flow status。但是我在vue中使用，报错有点看不懂。
// 所以我是配置为使用 flow check
var FlowWebpackPlugin = require('flow-webpack-plugin');
plugins: [
    new FlowWebpackPlugin({
      flowArgs: ['check']
    })
]

• 最后，运行 npm run dev 就可以边改边看到 flow 的类型校验信息了