flow静态类型检查器

Flow 是一个针对 JavaScript 代码的静态类型检查器。它是在Facebook开发的，经常和React一起使用。 它可以让你使用特殊的类型语法来注释变量，函数和React组件，并尽早地发现错误。 您可以阅读 Flow 介绍 来了解基本知识。

1、在一个项目中添加 Flow

首先安装flow-bin(该包类似于@babel/cli，安装后可以使用flow命令)，然后flow init生成.flowconfig纯文本配置文件

npm i -D flow-bin

// 生成.flowconfig纯文本配置文件
flow init

在项目的根目录下在创建./src/index.js文件

/* @flow */
function multiple10 (num) {
  return num * 10
}

multiple10('20')

function getLength (str: string) {
  return str.length
}
getLength('3')
getLength([1,2,3])

其中/* @flow */表示该文件接受检测

在命令行执行flow check

可以检测出index.js中存在两个类型错误，一个是multiple10('20')参数应该为number类型，另一个是getLength (str: string)方法应该接收字符串。

注意：执行flow check时，会检查绝对路径下文件代码类型错误，如果你的文件的绝对路径中含有中文就会报如下错误：

2、flow+babel

在开发过程中flow可以帮助我们检测代码错误，但是无论是浏览器环境还是node环境都不支持flow的类型注释语法，那应该怎么办呢？其实我们可以联想到目前有些浏览器不支持es6+语法，但是babel可以帮助我们转译成es5，那么有没有什么工具可以帮助我们在项目打包发布过程中剔除掉其中的类型注释语法呢？显然是有的，可以在Babel配置中添加@babel/preset-flow转译规则或则引入@babel/plugin-transform-flow-strip-types插件，这两种方式都可以在babel转译过程中剔除掉类型注释语法。下面我们来试试：

安装：

npm i -D @babel/core @babel/cli

在项目根目录下创建.babelrc.js配置文件，并安装@babel/preset-flow或者@babel/plugin-transform-flow-strip-types，对.babelrc.js进行如下配置：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-flow"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    //"@babel/plugin-transform-flow-strip-types"
  ]
}

上面"@babel/preset-flow"和"@babel/plugin-transform-flow-strip-types"功能都是一样的，但是建议使用"@babel/preset-flow"

执行下面命令转译：

npx babel ./src/index.js -o ./dist/compied.js

打开compied.js文件看看：

"use strict";

function multiple10(num) {
  return num * 10;
}

multiple10('20');

function getLength(str) {
  return str.length;
}

getLength('3');
getLength([1, 2, 3]);

我们可以看到getLength(str: string)变成getLength(str)，说明剔除类型注释语法成功。

2、flow+babel+eslint

文章写到这还没有完，再继续拓展一下。

我们都知道不管是那种语法都需要规范去约束，使整个项目编码规范统一，方便维护。flow提供的类型注释语法同样需要规范去约束，他的约束规则由eslint-plugin-flowtype插件去检测，eslint的解析器需要设置为babel-eslint，至于为什么，官网有以下描述：

ESLint的默认解析器和核心规则仅支持最新的最终ECMAScript标准，不支持Babel提供的实验性（例如新功能）和非标准（例如Flow或TypeScript类型）语法。babel-eslint是一个解析器，允许ESLint在Babel转换后的源代码上运行。

注意：仅在使用Babel转换代码时才需要使用babel-eslint。如果不是这种情况，请为您选择的ECMAScript风格使用相关的解析器（请注意，默认解析器支持所有非实验语法以及JSX）。链接：https://github.com/babel/babel-eslint

1、安装eslint

npm i -D eslint

2、生成.eslintrc.js配置文件

npx eslint --init

3、安装babel-eslint和eslint-plugin-flowtype

npm i -D babel-eslint eslint-plugin-flowtype

4、配置parser和plugins

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:flowtype/recommended"
    ],
    "plugins": [
        "flowtype"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
    }
};

我们先把index.js中function getLength (str:string)冒号后面的空格去掉，等下检测代码规范时会发错

执行以下命令：

npx eslint ./src/index.js

错误表明str参数类型注释冒号后面必须有一个空格，在冒号后面加上一个空格后就不会报错了。

参考链接：
https://juejin.im/post/5866920661ff4b00576c6337
https://zhenyong.github.io/flowtype/docs/type-annotations.html#_
https://blog.zfanw.com/babel-js/#babelcli
https://babeljs.io/docs/en/babel-cli