Question

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 plugin将类型声明转换为PropTypes，这可能是一个解决方案。

Answer 1

在问这个问题一年之后，我想提供一个关于我如何解决这个问题的最新消息。

随着Flow的发展，我开始用它键入我的代码库，并且没有添加任何新的PropType定义。到目前为止，我认为这是一个很好的方法，因为如上所述，它不仅可以让你输入道具，还可以输入代码的其他部分。这非常方便，例如，当您拥有状态中的道具副本时，可以由用户修改。此外，在IDE中自动完成是一个很棒的收获。

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

Answer 2

除了属于非常广泛的类型检查领域之外，两者之间并没有太大的相似性。

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

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

如果您想为整个项目提供更灵活的类型检查，那么Flow / TypeScript是合适的选择。只要您只将注释类型传递给组件，就不需要PropTypes。

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

Answer 3

我认为此处遗漏的一点是流量是静态检查器，而 PropTypes 是运行时检查器 ，这意味着

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

Answer 4

尝试仅使用Flow声明道具的类型。指定不正确的类型，例如数字而不是字符串。您将看到这将在使用Flow-aware编辑器中的组件的代码中标记。但是，这不会导致任何测试失败，您的应用仍然有效。

现在添加使用不正确类型的React PropTypes。这将导致测试失败，并在应用程序运行时在浏览器控制台中标记。

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

React PropTypes vs. Flow

4 个答案: