（facebook）流程 - 类型注释如何工作答案

【问题标题】：(facebook) flow - how do type annotations work（facebook）流程 - 类型注释如何工作
【发布时间】：2017-02-03 21:49:01
【问题描述】：

Facebook 的 Flow 支持type annotations。指定类型在 JavaScript 中是不可用的（而且可能永远不会，因为它的弱类型特性）——它是 TypeScript 语言的一个主要特性。

我的问题是 - 应该如何在 JavaScript 代码中使用 Flow 的类型注释，知道 JS 不支持类型注释 - 它只是语言之外的东西。

我的评论：当然，我可以使用另一个 JS 预处理器来删除注释（无论是在 grunt、gulp、webpack 还是其他什么下），但这是一个额外的步骤，会使自动化变得更加昂贵。这对我来说似乎是非常糟糕的设计，所以我想可能有比这更好的解释/解决方案。

此外，类型注释是 TypeScript 的一项功能。既然flow支持，那是不是说Flow的目标不仅是JavaScrpt，也是TypeScript呢？如果是这样，那我为什么要使用 flow 而不是 TypeScript？

【问题讨论】：

标签： javascript typescript annotations flowtype

【解决方案1】：

Flow 支持 javascript cmets 中的类型注释，但我想 Flow 与 Typescript 相比最大的论点是没有太多的转换。您的 javascript 保持不变，并且您获得了静态类型的好处。另外，如果您阅读有关流程的文档，它有自己的删除类型注释的方法；想想它有点像编译。

编辑：看来我错了，打字稿还支持基于注释的注释。

【讨论】：

它有自己的删除类型注释的方式 - 这对我来说完全没有意义，因为 TypeScript 给了你很多，但它迫使你编译/转译它。 Flow 是一个静态类型检查器，那我为什么还要引入一个编译阶段呢？我不理解你写的内容，但我无法理解这个概念。现在我看到 FB 希望让他们的独家工具与 MS 和 Google 的 TypeScript 竞争。
嗯，移除附加的东西，和改造的东西有很大的不同。此外，正如我上面所说，您可以将类型注释保留在 javascript cmets 中，作为完全删除“删除过程”的一种方式。但是，我认为您缺少的真正重要的事情是我的 javascript 保持不变。
TypeScript 也不会改变 JavaScript。也许您应该发布一些您认为发生这种情况的示例？
嗯，你在任何地方使用 ES6 功能，可能更像是 Ryan 的想法。
因为 flow 在 babel 之外工作，无需通过类型 cmets 进行任何转换。通过这种方式，可以在不更改文件类型或添加任何转换的情况下使用类型注释来扩充现有的 javascript。我个人不使用它，但据我所知，Flow 可以做到 Typescript 没有。

【解决方案2】：

这里有很多选择。

类型注释

在 Flow 或 TypeScript 中，您可以使用类型注释，或使用 cmets。如果你不在 TypeScript 中使用类型注解，你可以使用 --allowJs 标志并照常在 JS Doc cmets 中编写你的类型：

如果您使用语法类型注释（例如a: string），则需要使用 Babel 或 TypeScript 来删除它们。

ES6 特性

如果您正在使用 ES6+ 功能（如类、导入、箭头函数等），并且希望针对 ES5 兼容的浏览器，则需要使用一些转换步骤将这些构造转换为兼容的代码。 Babel 或 TypeScript 都可以做到这一点。由于 Flow 通常被链接到 Babel，这基本上是“免费”的，就像在 TypeScript 中一样。

TypeScript 特有的功能

如果您想使用特定于 TypeScript 的 enum 或 namespace，则必须使用 TypeScript。如果你想使用 Babel 为你做 ES6 转换（也许你有一些想要运行的插件），你可以将 TypeScript ES6 输出链接到 Babel，这样就只有一个降级进行。

类型系统

Flow 和 TypeScript 的类型系统有些不同。有细微的差别，但没什么大不了的。

每种方法的支持者都会向您展示适用于其中一种但不适用于另一种的示例，例如

var arr = [10, "ok"];
arr.pop();
arr.push(10);
arr[1].substr(1); // crashes

和

function square(x) { return x * x };
console.log(square('a hundred')); // prints NaN

【讨论】：