Skip to main content

用法

一旦你已 安装 Flow,你将希望了解如何在最基本的层面上使用 Flow。对于大多数新的 Flow 项目,你将遵循以下一般模式:

¥Once you have installed Flow, you will want to get a feel of how to use Flow at the most basic level. For most new Flow projects, you will follow this general pattern:

初始化你的项目

¥Initialize Your Project

为 Flow 准备一个项目只需要一个命令:

¥Preparing a project for Flow requires only one command:

flow init

在项目的顶层运行此命令以创建一个名为 .flowconfig 的空文件。在最基本的层面上,.flowconfig 告诉 Flow 后台进程从哪里开始检查 Flow 代码是否有错误。

¥Run this command at the top level of your project to create one, empty file called .flowconfig. At its most basic level, .flowconfig tells the Flow background process the root of where to begin checking Flow code for errors.

就是这样。你的项目现在已启用 Flow。

¥And that is it. Your project is now Flow-enabled.

你的项目通常有一个空的 .flowconfig 文件。但是,你可以通过多种方式将 配置和自定义 Flow 添加到 .flowconfig

¥It is common to have an empty .flowconfig file for your project. However, you can configure and customize Flow in many ways through options available to be added to .flowconfig.

运行 Flow 后台进程

¥Run the Flow Background Process

Flow 的核心优势是它能够快速检查代码是否有错误。一旦你为 Flow 启用了你的项目,你就可以启动进程以允许 Flow 快速增量地检查你的代码。

¥The core benefit to Flow is its ability to quickly check your code for errors. Once you have enabled your project for Flow, you can start the process that allows Flow to check your code incrementally and with great speed.

flow status

该命令首先启动一个后台进程,该进程将检查所有 Flow 文件 是否有错误。后台进程继续运行,监视代码的更改并逐步检查这些更改是否有错误。

¥This command first starts a background process that will check all Flow files for errors. The background process continues running, monitoring changes to your code and checking those changes incrementally for errors.

你还可以键入 flow 来实现相同的效果,因为 statusflow 二进制文件的默认标志。

¥You can also type flow to accomplish the same effect as status is the default flag to the flow binary.

在任何给定时间只会运行一个后台进程,因此如果多次运行 flow status,它将使用相同的进程。

¥Only one background process will be running at any given time, so if you run flow status multiple times, it will use the same process.

要停止后台进程,请运行 flow stop

¥To stop the background process, run flow stop.

为 Flow 准备代码

¥Prepare Your Code for Flow

Flow 后台进程监控所有 Flow 文件。但是,它如何知道哪些文件是 Flow 文件,从而应该检查哪些文件?将以下内容放在 JavaScript 文件中的任何代码之前是进程用来回答该问题的标志。

¥The Flow background process monitors all Flow files. However, how does it know which files are Flow files and, thus, should be checked? Placing the following before any code in a JavaScript file is the flag the process uses to answer that question.

1// @flow

该标志采用普通 JavaScript 注释的形式,并用 @flow 进行注释。Flow 后台进程收集具有此标志的所有文件,并使用所有这些文件中可用的类型信息来确保一致性和无错误编程。

¥This flag is in the form of a normal JavaScript comment annotated with @flow. The Flow background process gathers all the files with this flag and uses the type information available from all of these files to ensure consistency and error free programming.

你也可以使用 /* @flow */ 形式作为标志。

¥You can also use the form /* @flow */ for the flag as well.

对于项目中没有此标志的文件,Flow 后台进程会跳过并忽略该代码(除非你调用 flow check --all,这超出了基本使用范围)。

¥For files in your project without this flag, the Flow background process skips and ignores the code (unless you call flow check --all, which is beyond the scope of basic usage).

编写 Flow 代码

¥Write Flow Code

现在所有设置和初始化都已完成,你可以编写实际的 Flow 代码了。对于你用 // @flow 标记的每个文件,你现在可以使用 Flow 的全部功能及其类型检查。这是一个示例 Flow 文件:

¥Now that all the setup and initialization is complete, you are ready to write actual Flow code. For each file that you have flagged with // @flow, you now have the full power of Flow and its type-checking available to you. Here is an example Flow file:

1function foo(x: ?number): string {2  if (x) {3    return x;4  }5  return "default string";6}

请注意添加到函数参数的类型以及函数末尾的返回类型。通过查看这段代码,你也许可以看出返回类型有错误,因为该函数也可以返回 number。但是,你不需要目视检查代码,因为当你 检查你的代码 时,Flow 后台进程将能够为你捕获此错误。

¥Notice the types added to the parameter of the function along with a return type at the end of the function. You might be able to tell from looking at this code that there is an error in the return type since the function can also return a number. However, you do not need to visually inspect the code since the Flow background process will be able to catch this error for you when you check your code.

检查你的代码

¥Check Your Code

Flow 的很棒之处在于你可以获得有关代码状态的近乎实时的反馈。无论何时你想要检查错误,只需运行:

¥The great thing about Flow is that you can get near real-time feedback on the state of your code. At any point that you want to check for errors, just run:

# equivalent to `flow status`
flow

第一次运行时,将生成 Flow 后台进程 并且将检查所有 Flow 文件。然后,当你继续迭代你的项目时,后台进程将持续监视你的代码,以便当你再次运行 flow 时,更新的结果将接近瞬时。

¥The first time this is run, the Flow background process will be spawned and all of your Flow files will be checked. Then, as you continue to iterate on your project, the background process will continuously monitor your code such that when you run flow again, the updated result will be near instantaneous.

对于 上面的代码,运行 flow 将产生:

¥For the code above, running flow will yield:

3:12-3:12: Cannot return `x` because number is incompatible with string. [incompatible-return]