如何在 TypeScript 代码中使用 JavaScript React 组件

TypeScript 日益流行。因此，如果您还没有开始使用它，那么现在是开始使用它的最佳时机。很有可能，我们的项目已经开发了很长时间。如果是这种情况，最好的方法可能是逐渐将 TypeScript 用于代码库。我们可能会遇到想在 TypeScript 代码中使用 JavaScript 中的 React 组件代码的情况。

在本文中，我们将深入探讨如何制作让我们这样做的 TypeScript 声明文件。我们还学习了如何从 React 属性类型中创建接口。

声明文件

我们可以通过 .d.ts 文件扩展名来确定类型声明文件。这些文件的工作是在没有实现的情况下巩固我们的变量和方法的声明。

为了更好地理解类型声明文件，让我们在 JavaScript 中创建一个简单的函数。

sum.js

从上面给出的代码中，你可以看到我已经导出了函数。遗憾的是，它不包含任何类型。为了解决这个问题，让我们创建一个声明文件。最简单的方法是在同一目录中创建一个 .d.ts。

和.d.ts

在上面给出的代码中，我们定义了方法及其参数和返回类型。执行仍在 JavaScript 文件中，因此我们不想在 .d.ts 文件中重复执行。

由于上述操作，当我们在 TypeScript 代码中导入 sum 方法时，它是完全类型安全的。

Index.ts 结果

'”1”' 类型的参数不能分配给 'number' 类型的参数。

我们可以用变量而不是函数来做同样的事情。但是，请记住，TypeScript 能够在一定程度上分析 JavaScript 文件。

常量.js

索引.ts

Index.ts 结果

“100px”类型的参数不能分配给“数字”类型的参数。

但是，我们没有为 constants.js 文件创建声明文件，TypeScript 正确地为 HEADER_HEIGHT 和 FOOTER_HEIGHT 常量分配了文字类型。

声明模块

TypeScript 肯定很受欢迎。这就是为什么所有最常用的库都应该有 TypeScript 声明。即使是这种情况，您也可能出于某种原因想要使用没有声明的库。例如，它可能是您的组织开发的私人图书馆。

一个简单的用例是导入图像文件。 Webpack 主要在后台处理它，例如，使用文件加载器。尽管如此，TypeScript 并不承认图像文件是模块。

应用程序.tsx

App.tsx 结果

找不到模块“./logo.png”。

我们可以通过创建一个带有模块声明的文件来轻松解决它。

png.d.ts

在上面给出的代码中，我们定义所有扩展名为 .png 的文件都导出一个 URL。例如，我们也可以通过这种方式指定第三方库。

为 React 组件制作声明文件

如果我们在一个组织中使用 TypeScript，很可能很少有 React 组件已经到位。举个例子，让我们用 JavaScript 创建一个简单的输入组件。

输入.tsx

如果我们尝试按原样在 TypeScript 中导入 Input 组件，我们确实获得了一些类型安全性，但并不多。

ComponentProps 是 React 附带的一个实用程序，可以提取组件的 props 类型。

在上面给出的代码中，我们可以看到TS在一定程度上可以识别我们的Input组件。虽然标签等一些道具是不需要的，但在上述类型中没有给出。 type 属性的描述有些正确，因为我们给出了一个默认值。尽管我们可以进一步改进它。

输入.d.ts

如果您正在使用类组件，请使用从 React 导入的 ComponentClass 类型来代替 FunctionComponent。

在上面给出的代码中，我们独立地在上面的声明文件中导入其他类型。创建这些声明会产生类型安全的 React 组件，尽管它们不是使用 TypeScript 创建的。

从 prop 类型创建接口

在上面给出的代码中，我们定义了一个 JavaScript React 组件并从头开始制作一个 TypeScript 接口。这样做有很大的机会产生好的结果，但这需要一些时间。很有可能，我们尝试使用的 React 组件已经定义了 prop 类型。

要从 prop 类型创建 TypeScript 接口，我们必须使用 InferProps 实用程序。

通过使用上面给出的代码可能会给我们一些类型安全。让我们检查一下上述定义产生的道具：

你可以看到我们可以利用 prop 类型来创建有效的 TypeScript 接口。遗憾的是，他们错过了一些重要的细节，例如 onChange 函数的参数。

概括

在本文中，我们了解了如何在 TypeScript 代码中使用 JavaScript React 组件。为此，我们学习了编写声明文件的基本规则。我们还学习了如何从一开始就为 React 组件声明和使用 prop 类型。最后，我们比较了两种方法，在大多数情况下，从一开始就对 TypeScript 接口进行编码似乎是一个更好的主意。

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

本文链接：https://www.qanswer.top/7828/50570110