使用 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

标签：Typescripts,解决方案,Typescript,React,PropTypes,Props,Interface
来源： https://www.cnblogs.com/amboke/p/16641827.html