React 项目使用静态类型检查Flow

1. react项目安装Flow

npm/yarn安装，可以全局安装，也可项目安装：

npm install -g flow-bin

2. 初始化配置文件

Flow的配置文件，默认为根目录下的.flowconfig。2种方式创建该文件

1. 命令npx flow init
2. 直接手工创建文件

配置文件

[ignore] # 忽略的不需要检查的文件
<PROJECT_ROOT>/node_modules/.*
# <PROJECT_ROOT> 表示根目录的绝对路径
[include] # 表示待检测的路径， .flowconfig 所在目录下的所有文件都被认为是待检测的 
[libs] # 指定接口文件的路径
[lints]
[options] # 设置配置项
[strict]

3. 代码静态检查

js文件第一行，加入// @flow这个注释，这样 flow 就会检查此文件了。
e.g.

// @flow
handleClick(i: number) {
}

详细用法，参考官方文档。

4. 常见问题

4.1 VSCode 报错：Type annotations can only be used in TypeScript files

是因为javascript的验证，需要在设置中配置一下，具体路径为：

Settings - User - Extensions - TypeScript - JavaScript - Validate: Enable

对应配置文件：

// .vscode\settings.json
{
    "javascript.validate.enable": false
}