带流量的静态类型检查

当你用Flow(Facebook的静态类型检查库)打字几分钟时,会发生一个有趣的事情。

自己看。

<$>[注]FWIW,Flow是React的优秀合作伙伴,但它在任何JS环境中都具有魅力。

安装

將「$ cd」插入您最喜歡的「just-messing」項目,或使用 React CLI工具快速「$ create-react-app something-disposable」。

在任何情况下,从根目录中,您将想要运行以下命令:

1$ npm i -D flow-bin
2$ flow init

安装流程 创建一个(至少为此介绍)空白的 .flowconfig 文件。

• 你是否使用了「create-react-app」? 很酷. 它可以自动使用 Flow
• 使用你自己的 Babel config? 运行「$ npm i -D transform-flow-strip-types」然后添加「plugins": [transform-flow-strip-types] 到你的 `.babelrc' 到(如其名所示)从你的代码
• 没有转换? 也很酷,但你必须使用本文末尾提到的特殊评论语法 <$>[注意] 需要记住的是 Flow 只是一个工具来验证你的应用程序的完整性。

使用

现在你的项目有 Flow,现在是时候让它工作了,首先,你要通过在每个文件顶部放下以下评论来标记你想要输入的文件检查:

1/* @flow */

Flow 运行一个服务器,以便在您更改代码时保持检查的增量并快速运行。 通过在您的项目中运行$ flow开始运行它. 现在您可以随时使用相同的命令进行检查。

Flow 使用注释来通信类型. 它们是直观的,但可以像您想要的那样详细和复杂。

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

功能的行为类似,但有一些自己的好奇心。

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

Flow 还与字面值(如 `let foodSpecies: 'Myocastor coypus' = 'Myocastor coypus'')、类和超越本原理范围的类型一起工作很好。

这就是为基础。

至于我们上面提到的评论语法,它将使您的 Flow 注释看不见 JS 解释器,如果您不挖掘编译器,这很棒,但如果您是人类,它看起来像这样:

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

Flow是一个深厚而强大的工具,我们在这里只刮了表面,但其美丽大部分在于其学习时刻,掌握周的设计。