我们都知道 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 版本:
我这里是 0.67.0
,所以我将安装此版本,并作为开发依赖。
$ yarn add flow-bin@0.67.0 --dev
执行完该命令后,提示没有此版本,于是选择一个临近的新版本。
使用 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
执行完命令后,结果如下:
根据文档中的说明,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
)!
此时运行 npm run flow
,没有任何错误,我们将 multiply(14, 14)
修改为 multiply(14, 'a')
在试试看:
可以看出,Flow 正常在工作。
配合 WebStorm 使用
每次修改代码后,需要执行 npm run flow
进行代码检查,这难免有点麻烦。值得高兴的是,很多前端开发工具支持集成 Flow。WebStorm 在 2016.3
版本中增加了对 Flow 的支持。
打开 Preferences | Languages & Frameworks | JavaScript,设置 JavaScript 语言版本为 Flow,然后指定 Flow 的路径即可。
配置好之后,Webstorm 将会启动一个 Flow 服务来分析当前编辑的代码,错误会直接在界面上显示:
同时,在编辑代码时,Webstorm 还提供导航、代码补全和类型提示功能,详情见 JetBrains Blog。