React PropTypes 与 Flow

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 定义。到目前为止，我认为这是一个很好的方法，因为如上所述，它不仅允许您输入 props，还允许您输入代码的其他部分。这非常方便，例如，当您在 state 中拥有 props 的副本时，用户可以对其进行修改。 此外，IDE 中的自动完成功能也是一项了不起的收获。

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

Answer 2

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

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

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

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

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

Answer 3

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

• Flow 可以在编码时拦截上游错误：理论上它可能会遗漏一些您不知道的错误（例如，如果您在项目中没有充分实施流程，或者在深层嵌套对象的情况下）
• PropTypes 会在测试时捕捉到下游，所以它不会错过

Answer 4

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

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

基于此，看来即使使用Flow，也应该指定PropTypes。