反应PropTypes与流量

PropTypes和Flow涵盖了类似的内容，但是使用的是不同的方法。PropTypes可以在运行时向您发出警告，这有助于快速找到来自服务器等的格式错误的响应。但是，Flow似乎是未来，并且泛型等概念是非常灵活的解决方案。另外，Nuclide提供的自动补全功能对Flow来说是一大优势。

我现在的问题是，在开始新项目时哪种方法最好。还是同时使用Flow和PropTypes是一个好的解决方案？使用两者的问题是您编写了大量重复的代码。这是我编写的音乐播放器应用程序的示例：

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

这两个定义基本上都包含相同的信息，并且当数据类型更改时，两个定义都需要更新。

我发现这个babel插件可以将类型声明转换为PropTypes，这可能是一个解决方案。

提出此问题一年后，我想提供有关此问题的经验的最新信息。

随着Flow的发展，我开始用它输入代码库，并且没有添加任何新的PropType定义。到目前为止，我认为这是一个好方法，因为如上所述，它不仅使您可以键入prop，而且还可以键入代码的其他部分。例如，当您拥有状态中的道具副本时，这非常方便，可由用户修改。同样，IDE中的自动补全也是一项了不起的成就。

一个方向或另一个方向的自动转换器并没有真正起飞。因此，对于新项目，我现在真的建议使用Flow over PropTypes（以防您不想重复输入两次）。

除了两者都属于非常广泛的类型检查领域之外，两者之间实际上并没有太多相似之处。

Flow是一个静态分析工具，它使用该语言的超集，使您可以在所有代码中添加类型注释，并在编译时捕获整个错误类。

PropTypes是一个基本的类型检查器，已被修补到React上。除了传递给给定组件的道具类型之外，它无法检查其他任何东西。

如果您想对整个项目进行更灵活的类型检查，那么Flow / TypeScript是合适的选择。只要您仅将带注释的类型传递到组件中，就不需要PropTypes。

如果您只想检查prop类型，那么不要使其余的代码库过于复杂，而是使用更简单的选项。

我相信这里遗漏的一点是Flow是静态检查器，而PropTypes是运行时检查器，这意味着

• 流可以在编码时在上游拦截错误：理论上它可以遗漏一些您不会知道的错误（例如，如果您在项目中实现的流不够，或者对象嵌套很深）
• PropTypes会在测试时将它们捕获到下游，因此不会错过

尝试仅使用Flow声明道具的类型。指定错误的类型，例如数字而不是字符串。您将看到在使用Flow-ware的编辑器中使用该组件的代码中将对此进行标记。但是，这不会导致任何测试失败，并且您的应用仍然可以运行。

现在，添加带有错误类型的React PropType的使用。运行该应用程序时，这将导致测试失败并在浏览器控制台中被标记。

基于此，似乎即使正在使用Flow，也应该指定PropTypes。