使用 Flow 进行静态类型检查

当你摆弄 Flow（Facebook 的静态类型检查库）几分钟后，会发生一件有趣的事情。JavaScript 类型开始变得简单、有用，而且 — — 我们敢说 — — 有趣。

请亲眼看看。

安装

$ cd进入你最喜欢的just-messing项目或者使用React CLI工具快速$ create-react-app something-disposable。

无论哪种情况，您都需要从根目录运行以下命令：

$ npm i -D flow-bin
$ flow init

简而言之，这就是安装。安装 Flow。创建一个（至少对于这个介绍来说）空白.flowconfig文件。从那里开始如何进行有点多选。

• 你用过create-react-app嗎？太棒了。它可以自动与 Flow 配合使用。

• 使用你自己的 Babel 配置？跑步$ npm i -D transform-flow-strip-types然后添加"plugins": [transform-flow-strip-types]到你的.babelrc到（顾名思义）从你的代码中剥离 Flow 类型。

• 没有转译？也很酷，但是你必须使用本文末尾提到的特殊注释语法。

  要记住的是，Flow 只是一个验证应用程序完整性的工具。JavaScript 解释器不知道如何处理它的注释 — — 所以它们必须在运行时之前消失。

使用

现在您的项目已经拥有 Flow，是时候开始使用它了。首先，您需要标记要进行类型检查的文件，方法是在每个文件的顶部添加以下注释：

/* @flow */

Flow 运行一个服务器，以便在您更改代码时保持检查的增量并快速运行。通过运行来启动它$ flow在您的项目中。现在，您可以在任何时候使用相同的命令执行检查。您将获得令人难以置信的满意No errors!响应或像这样的逐个细分：

Flow 使用注释来传达类型。它们很直观，但可以根据您的需要变得尽可能详细和复杂。以下是一些示例：

let name: string = "Ol' Bonesnapper";
let age: number = 32;
let hungry: boolean = true;
let faves: string[] = ['tires', 'nutria'];
let eyes: {left: string, right: string} = {left: 'blind', right: 'good'};

函数的行为类似，但又有自己的一些奇妙之处。

function chomp(food: string): string { // We're annotating both the input and the output
  return name + ' ate a ' + food;
}

Flow 也适用于文字值（例如let foodSpecies: 'Myocastor coypus' = 'Myocastor coypus')、类和超出本入门范围的一系列类型。好消息是团队在文档方面做得很好。

这就是基础知识。

至于我们上面提到的注释语法，它将使你的 Flow 注释对 JS 解释器不可见，如果你不熟悉编译，这很好，但实现起来有点麻烦，如果你是人类，那就没那么好了。它看起来像这样：

let name/*: string */= "Ol' Bonesnapper";
let age/*: number */= 32;
let hungry/*: boolean */= true;
let faves/*: string[] */= ['tires', 'nutria'];
let eyes/*: {left: string, right: string} */= {left: 'blind', right: 'good'};
function chomp(food/*: string*/)/*: string*/ {
  return name + ' ate a ' + food;
}

???? 忠告：Flow 是一款深奥而强大的工具。我们在这里只是触及了表面，但它的魅力在于其“只需片刻即可学习，数周即可掌握”的设计。