使用 Typescript 做出反应：是否应该使用 Typescript 替换 propTypes 定义？答案

【问题标题】：React with Typescript: Should the use of Typescript replace propTypes definitions?使用 Typescript 做出反应：是否应该使用 Typescript 替换 propTypes 定义？
【发布时间】：2018-05-22 08:23:11
【问题描述】：

我是 Typescript 的新手，在阅读了一些相关文章后，似乎通过在 React 中使用 Typescript，不再需要 propTypes 定义。

但是通过检查 some of the most populars React Component Libraries 项目

点赞Material-IU:

或Semantic UI React

或React Toolbox

...似乎一些大型项目同时使用这两种方法。所以，我对此有点困惑。而且我真的不明白这些 *.d.ts 文件的目的

他们为什么同时使用这两种方法？ *.d.ts 文件的用途是什么？这如何适应 React 开发工作流程？

我对此的实际想法是：

*.d.ts 应该包含组件道具的类型
如果某些 prop 接收到错误类型的数据，typescript 将启动编译错误
React 组件定义可以避免定义 propTypes（因为这现在由 Typescript 在不同的文件中处理）

这是正确的吗？任何人都可以对此有所了解吗？ :)

提前致谢！！

【问题讨论】：

*.d.ts 是 typescript 的定义文件

标签： javascript reactjs typescript

【解决方案1】：

TypeScript 定义 (.d.ts) 文件定义了 TypeScript 编译器使用的类型信息，在许多 IDE 中，这些文件还用于在开发过程中提供反馈。除了供应商提供的定义之外，您可以在使用 TypeScript 编写 React 组件时使用interfaces。一个常见的用例是定义 props 对象的类型。

与定义propTypes 相比，使用接口的一个好处是该代码在运行时会消失，因此如果您传递正确的道具，则无需在应用的编译版本中运行任何类型检查.

也就是说，在某些情况下，在运行时检查传递给组件的道具类型仍然很有帮助。例如，您可能正在使用来自外部 API 的数据，并希望确保格式符合您的预期。在这种情况下，使用propTypes 是有意义的。

此外，正如 cmets 中正确指出的那样，propTypes 在库被 JavaScript 编写的代码使用时很有用，JavaScript 将使用代码的编译版本，否则会缺少类型信息。

【讨论】：

这些库还为不使用 typescript 的消费者提供了 propTypes
@wgcrouch 是的，我没有提到，已编辑，谢谢。
那么，开发人员是否在某些项目中编写了两次 props 检查（typescript → compile time & propTypes → runtime）？有没有办法从 propTypes 自动创建一个 .d.ts 或相反？管理此问题的高效工作流程是什么？
是的，图书馆作者正在按照您所说的那样做这两件事。我想在一些简单的情况下可能可以编写一个并自动生成另一个，但不可能为此制定通用解决方案，因为在编译/运行时可以获得不同的信息。我个人的“解决方案”只是使用 TypeScript 并完全跳过 propTypes。
感谢汤姆的解释！！