是Facebook出品的一个JavaScript代码的静态类型检查工具，它做了很多处理，使您的代码更快，更智能，更自信，更好的适应性。现在已经在前端比较流行的React 、Vue 等框架中得到使用。今天就和大家一起来学习Flow以及在实际项目中的使用。

Flow 安装

这里我们选择使用 yarn，当前你也可以使用 npm, 如果你对 yarn不是很了解，建议你阅读 煦涵说Yarn。首先我们先初始化一个 flow 项目，安装完编译器，然后再安装 flow 。

mkdir flow-projectcd flow-projectyarn inityarn add --dev babel-cli babel-preset-flow babel-preset-es2015

项目根目录下创建 .babelrc 文件，并增加如下内容：

{    "presets": ["flow", "es2015"]}

安装 Flow:

yarn add --dev flow-bin

运行 flow：

yarn run flow

yarn run v0.16.1$ "/flow-proj/node_modules/.bin/flow" Launching Flow server for /flow-projSpawned flow server (pid=17242)Logs will go to /private/tmp/flow/zSvue-workspacezSflow-proj.logNo errors!✨  Done in 2.48s.

Flow 使用

我们先在根目录下新建src目录，并新建一个index.js文件。同时在 package.json 文件中增加下面scripts内容，以方便我们后期的命令行编译。

// @flow[1,2,3,4].map((item:number, index) => {    return item * item;});

package.json

"scripts": {    "build": "yarn run flow && babel src -d lib"}

运行 yarn run build， 没有报错， 会在生成lib文件目录，index.js的 flow type 注释会被 remove 掉，同时进行了箭头函数到ES5的转换。

// @flow['1',2,3,4].map((item:number, index) => {    return item * item;});

运行 yarn run build，会报如下类型检测错误：

yarn run v0.16.1$ "/flow-proj/node_modules/.bin/flow" src/index.js:3  3: ['1',2,3,4].map((item:number, index) => {      ^^^ string. This type is incompatible with the expected param type of  3: ['1',2,3,4].map((item:number, index) => {                           ^^^^^^ numberFound 1 errorerror Command failed with exit code 2.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

更多类型坚持实例不再一一列举，官网有很多介绍type的例子。

Flow 配置文件

上面提到没有配置文件，会报错，.flowconfig 文件由以下5个部分组成：

• [include] --包含的文件或者目录
• [ignore] --忽略的文件或者目录，支持正则匹配
• [libs] --第三方库支持，项目根目录下的flow-typed目录作为库目录
• [options] --默认键值对配置，某些选项可以使用命令行方式重载
• [version] --期望使用的Flow版本

流行编辑器插件支持

• Visual Studio Code: Flow-Language-Support
• Sublime Text:Flow 和 SublimeLinter-flow

更多请参考：

感谢您的阅读

--eof--

作者[煦涵]

下面是「FED实验室」的微信公众号二维码，欢迎长按、扫描关注：