React Native 中使用 Flow

编辑于2018年05月15日

我们都知道 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