使用 Typescripts Interface Props 检查 PropTypes 的最佳方式

使用 Typescripts Interface Props 检查 PropTypes 的最佳方式

介绍

你可能正在开发一个使用 Typescript 构建的 React 应用程序，并且需要支持 PropTypes。为什么你需要他们两个？好吧，每种解决方案都有不同的用途。 PropTypes 在运行时检查，而 Typescript 在编译时验证类型。

就我而言，我正在开发一个使用 Typescript 构建的 React UI 库。但我公司中该库的大多数消费者仍在使用 Javascript。所以在很多情况下，导出 Typescript 的 props 不足以减轻将错误数据传递给组件的情况，因此我们也需要 PropTypes。

要求

首先，您需要在一个 Typescript React 项目上工作并安装以下软件包：

 npm 安装道具类型 npm install -D @types/prop-types

问题

出现在脑海中的第一个解决方案是手动创建 PropTypes，但这样做的问题是我们需要手动将其与 Interface Props 同步，这可能很痛苦且容易出错。

我们需要一种简单直接的方法来强制进行编译检查，以确保我们的 PropTypes 定义与 Interface Props 匹配。本质上，我们的 props 定义只有一个事实来源。

解决方案

我发现的最佳解决方案是生成一个 PropTypes 地图 来自 道具接口本身 .起初这听起来可能令人困惑，所以让我演示一下。

假设我们有一个名为 Foo 的组件：

我们将使用 验证图 为 PropTypes 生成 Typescript 接口映射，如下所示

然后我们将创建 propTypes 并将其分配给 Foo 组件：

你可以找到 这里 一个更复杂的例子。

结论

如果您有任何问题，请发表评论，并会尽快回复。

如果这对您有帮助，请务必关注我以获取更多 React/Typescript 技巧并喜欢这篇文章！谢谢！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/3078/19253109