我们都知道 JavaScript 是一门弱类型语言，并没有严格的类型检查，写起来非常畅快，但是也容易导致错误。因此，为了避免这类错误，我们常在方法中对数据类型进行判断。

Flow 是一个进行 JavaScript 静态类型检查的工具，减少由于类型不正确导致的错误，提高开发效率和代码质量。最初知道 Flow 是在阅读 F8 App 的源码时，为其中奇怪的语法而感到疑惑，于是简单的了解了一下，但没有实际使用。现在，正好开始了一个新的 React Native 项目，打算在项目中使用 Flow，感受一下 Flow 带来的更快、更强的编程体验。

创建 React Native app

执行 react-native init FlowApp，通过脚手架工具初始化项目。

RN iOS 0.45以上版本开始需要依赖一些第三方编译库，这些库在国内下载都非常困难（一般的翻墙工具都很难下载），React Native 中文网在论坛中提供了这些库的国内下载链接。

React Native 项目中带有默认的 .flowconfig，用于 Flow 的配置，我们可以直接使用默认的配置，如果有定制配置的需求可以查看文档。

安装 Flow

创建好 React Native 项目之后，我们需要下载 flow-bin。

进入项目的根目录，打开 .flowconfig，在文件底部查看应用需要的 Flow 版本：

flow_version

我这里是 0.67.0，所以我将安装此版本，并作为开发依赖。

$ yarn add flow-bin@0.67.0 --dev

执行完该命令后，提示没有此版本，于是选择一个临近的新版本。
choose_version

使用 Flow

安装好 Flow 之后，我们就可以在项目中使用了，根据文档的介绍，大多数新的Flow项目，遵循下面的流程：

  • 执行 flow init 初始化项目。
  • 执行 flow 命令启动 Flow 后台进程。
  • 使用 // @flow 指定需要被 Flow 检查的文件。
  • 编写 Flow 代码。
  • 检查代码是否有类型错误。

其中 flow init 帮我们创建 .flowconfig 配置文件，而 React Native 项目中默认有了，可以跳过此步骤。

在 package.json 中配置一个命令：

scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "flow": "flow"
}

接下来，我们可以在命令行启动 Flow 服务：

$ npm run flow

执行完命令后，结果如下：
run_flow

根据文档中的说明，Flow 的核心优势在于它能够快速的检查代码。该命令首先启动后台进程，该进程将检查所有 Flow 文件是否有错误，然后后台进程将继续运行，监视对代码的更改并逐步检查这些更改是否有错误，当我们再次执行 flow 命令时，可以很快的得到结果。

在任何时候只有一个后台进程会运行，所以如果你多次执行 flow status，它将使用相同的进程。

要停止后台进程，可以运行 flow stop 命令。因为我们没有全局安装 Flow，所以不能直接在命令行使用，需要在 package.json 中配置命令（上面的 flow 命令也是这样）。

scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "flow": "flow",
    "flow-stop": "flow stop"
}

添加 Flow 代码

Flow 后台进程会监视所有的 Flow 文件，但是哪些文件会受检查呢？在 JavaScript 文件的开头添加下面的代码即可：

// @flow
or
/* @flow */

对于没有此标志的文件，Flow 将会跳过，除非调用 flow check --all。

我们打开 App.js 添加一些规则（文件顶部已经添加了 @flow）！

add_flow_rule

此时运行 npm run flow，没有任何错误，我们将 multiply(14, 14) 修改为 multiply(14, 'a') 在试试看：

flow_error

可以看出，Flow 正常在工作。

配合 WebStorm 使用

每次修改代码后，需要执行 npm run flow 进行代码检查，这难免有点麻烦。值得高兴的是，很多前端开发工具支持集成 Flow。WebStorm 在 2016.3 版本中增加了对 Flow 的支持。

打开 Preferences | Languages & Frameworks | JavaScript，设置 JavaScript 语言版本为 Flow，然后指定 Flow 的路径即可。

webstorm_flow

配置好之后，Webstorm 将会启动一个 Flow 服务来分析当前编辑的代码，错误会直接在界面上显示：

ws_flow_error

同时，在编辑代码时，Webstorm 还提供导航、代码补全和类型提示功能，详情见 JetBrains Blog。