如何将React应用程序迁移到打字稿

将现有React项目迁移到TypeScript：循序渐进指南

初学TypeScript时，经常听到的建议是：“转换一个现有的项目！这是最好的学习方法！”不久之后，一位Twitter上的朋友主动提出要帮我做这件事——向我展示如何将一个React应用迁移到TypeScript。

本文旨在成为您的这位朋友，帮助您将自己的项目迁移到TypeScript。为了说明，我将使用我个人项目中的一些片段，这些片段是我在迁移过程中自己迁移的。

关键要点

• 通过向项目添加TypeScript、添加tsconfig.json、从简单开始、转换所有文件、提高严格性、清理和庆祝成功迁移来开始将React应用程序迁移到TypeScript。
• 可以逐步采用TypeScript，从一个简单的组件开始。将文件扩展名更改为.tsx并添加类型注释。逐步转换项目中的所有文件。
• 通过启用更严格的规则来提高tsconfig.json的严格性。这可以逐步完成，在出现错误时修复它们。目标是快速前进，稍后再返回修复任何问题。
• 在迁移过程中，利用@ts-ignore和FixMeLater等快捷方式来减轻负担。随着时间的推移，优先使用正确的类型安全来替换这些快捷方式。

计划

为了使这个过程不那么令人望而生畏，我们将将其分解成步骤，以便您可以分块执行迁移。在处理大型任务时，我总是发现这很有帮助。以下是我们将采取的所有步骤来迁移我们的项目：

1. 添加TypeScript
2. 添加tsconfig.json
3. 从简单开始
4. 转换所有文件
5. 提高严格性
6. 清理
7. 庆祝

注意：整个过程中最重要的步骤是第7步。虽然我们只能按顺序完成这些步骤才能到达那里。

1. 向项目添加TypeScript

首先，我们需要将TypeScript添加到我们的项目中。假设您的React项目是用create-react-app引导的，我们可以按照文档运行：

<code>npm install --save typescript @types/node @types/react @types/react-dom @types/jest</code>

或者如果您使用的是yarn：

<code>yarn add typescript @types/node @types/react @types/react-dom @types/jest</code>

请注意，我们还没有将任何内容更改为TypeScript。如果我们运行本地启动项目的命令（在我的情况下为yarn start），则没有任何变化。如果是这种情况，那就太好了！我们准备进入下一步。

2. 添加tsconfig.json

在我们可以利用TypeScript之前，我们需要通过tsconfig.json进行配置。我们开始的简单方法是使用以下命令构建一个：

<code>npx tsc --init</code>

这让我们得到了一些基础知识。

我们尚未与TypeScript交互。我们只是采取了必要的措施来做好准备。我们的下一步是将文件迁移到TypeScript。有了这个，我们可以完成此步骤并继续下一步。

3. 从一个简单的组件开始

TypeScript的美妙之处在于您可以逐步采用它。我们可以从一个简单的组件开始迁移的第一部分。对于我的项目，我将从一个看起来像这样的Button组件开始：

<code>npm install --save typescript @types/node @types/react @types/react-dom @types/jest</code>

要正确转换它，我们需要做两件事：

1. 将文件扩展名更改为.tsx
2. 添加类型注释

由于此组件采用两个props，我们需要更改一些内容：

<code>yarn add typescript @types/node @types/react @types/react-dom @types/jest</code>

让我们通过运行项目来仔细检查一切是否正常运行，以确保我们没有破坏任何东西。请注意，在这里，react-scripts会自动检测新的更改并为我们修改tsconfig.json！瞧！这多么漂亮啊？

如果一切顺利，我们的项目将保持工作状态。给自己拍拍背！您已成功将第一个文件迁移到TypeScript。如果我们想在这里停止，我们可以，但让我们继续前进。

4. 转换所有文件

下一步是对项目中的所有文件执行步骤3的操作。如果您要迁移的项目相当大，我建议您多次迭代执行此操作。否则，您可能会让自己筋疲力尽。

在此步骤中，您可能需要根据使用的第三方库添加其他包。例如，我使用的是moment，因此我必须运行yarn add -D @types/moment才能将类型添加为devDependency。

在执行此操作时，还需要记住以下几点：

• 通过在错误之前的行添加// @ts-ignore来抑制TypeScript错误
• 如果文件使用jsx（即），则文件扩展名必须为.tsx而不是.ts
• 本地运行项目以确保一切正常（它们应该是）

完成此步骤后，困难的工作就完成了！我们的项目将使用TypeScript，但我们需要提高严格性才能利用其优势。

5. 提高tsconfig.json的严格性

现在，我们可以通过在tsconfig.json中启用更严格的规则来提高严格性。值得庆幸的是，react-scripts会在本地运行我们的项目时通知我们任何类型错误。我们将按照以下步骤进行操作：

1. 启用规则
2. 本地启动项目
3. 修复错误

我们将对以下规则重复此过程：

• "noImplicitAny": true
• "strictNullChecks": true
• "noImplicitThis": true
• "alwaysStrict": true

我想分享一个技巧。如果您发现某些内容隐式地具有类型any，并且您不确定此时如何修复它，请不要修复。创建这个并使用它来消除错误：

<code>npx tsc --init</code>

我们的目标是快速前进，稍后再返回修复这些问题。

这将为我们的项目带来更大的类型安全性。如果您想阅读更多关于编译器选项的信息，您可以阅读TypeScript手册中的相关内容。

完成此操作后，我们可以替换这些：

• "noImplicitAny": true
• "strictNullChecks": true
• "noImplicitThis": true
• "alwaysStrict": true

用这个：

• "strict": true

这也启用了这些严格选项：

• strictBindCallApply
• strictNullChecks
• strictFunctionTypes
• strictPropertyInitialization

此时，我们已经达到了项目中的标准严格性级别。如果我们想添加其他检查，我们可以添加这些规则：

• "noUnusedLocals": true
• "noUnusedParameters": true
• "noImplicitReturns": true
• "noFallthroughCasesInSwitch": true

一旦我们达到了我们满意的严格性级别，我们就可以继续下一步。

6. 清理快捷方式

如果您添加了@ts-ignore或使用了FixMeLater类型，现在是返回并修复它们的时候了。我们不必一次性完成所有这些操作，或者永远不必完成，但这将是确保项目中最大类型安全的最后一步。

有时修复这些的努力不值得花费时间，而有时是值得的。您必须与您的团队讨论并决定什么是有意义的。

7. 庆祝

我们做到了！我们正式将项目迁移到TypeScript。花点时间庆祝您的工作。这当然不是一件微不足道的事情。特别是如果您在一个大型代码库中工作。

需要记住的事项

在回顾我们的工作时，以下是一些在将React项目迁移到TypeScript时需要记住的事项。

从小处着手

利用TypeScript逐步采用的能力。一次一个文件地进行，按照自己的节奏进行。做对您和您的团队有意义的事情。不要试图一次性解决所有问题。

随着时间的推移提高严格性

无需从一开始就具有最大严格性。这是一个旅程。随着时间的推移提高级别。最终，您将达到一个感觉舒适的级别。如果您没有100%的严格性，不要感到难过。一些类型安全总比没有类型安全好。

依靠快捷方式

@ts-ignore和FixMeLater的技巧可以帮助减轻迁移的负担。并非所有内容都需要一次更改。根据需要使用快捷方式，但不要因为使用它们而感到难过。同样，重点是迁移，但这不应该很痛苦。随着时间的推移，您可以优先使用正确的类型安全来替换这些内容。但请记住，这些工具可供您使用，因此请使用它们。

这并不是将React项目迁移到TypeScript的唯一方法。但是，这对我来说是有效的。我希望它能像帮助我一样帮助您。

进一步阅读

• 使用TypeScript的React：最佳实践
• 提高TypeScript技能的实用方法
• TypeScript如何让您成为更好的JavaScript开发人员
• JavaScript：从新手到忍者，第二版
• React和React Native——第二版

特别感谢Karl Horky，他通过解释React.FC类型不推荐使用，因为它几乎没有好处并且有一些缺点，从而伸出援手。有关更多信息，请参阅此GitHub讨论。

关于将React应用程序迁移到TypeScript的常见问题解答

什么是TypeScript，为什么我应该考虑将我的React应用程序迁移到它？TypeScript是JavaScript的静态类型超集，它提供增强的类型检查、代码质量和工具支持。迁移到TypeScript可以帮助您在编译时捕获错误，提高代码可维护性，并在处理React应用程序时增强开发人员体验。

如何开始将我的React应用程序迁移到TypeScript？要开始，您可以使用带有TypeScript模板的Create React App之类的工具将TypeScript添加到您的项目中，或者手动配置您的项目以支持TypeScript。您还需要将您的.js和.jsx文件分别重命名为.ts和.tsx。

将我的JavaScript代码转换为TypeScript的过程是什么？此过程通常包括： a. 将您的JavaScript文件重命名为带有.ts和.tsx扩展名的TypeScript文件。 b. 向您的变量、函数和props添加类型注释。 c. 解决类型错误并修复TypeScript编译器标识的任何问题。 d. 利用TypeScript功能（如接口和枚举）来定义数据结构和常量。

我可以逐步将我的React应用程序迁移到TypeScript吗？是的，您可以逐步迁移您的应用程序。您可以一次转换一个组件或模块，同时维护现有的JavaScript代码库。这样，您可以逐步过渡到TypeScript，而不会中断您的开发工作流程。

使用TypeScript和React的好处是什么？一些好处包括更好的代码质量、提高的开发人员生产力、增强的代码自动完成、更强大的重构工具以及早期检测常见错误。它还通过类型注释提供更清晰、更具自文档性的代码。

在迁移到TypeScript时，如何处理第三方库和依赖项？您可以在DefinitelyTyped上找到许多流行库的TypeScript类型定义文件（通常带有.d.ts扩展名），或者使用@types之类的工具。如果类型定义不可用，您可以创建自己的类型定义，或者使用TypeScript的any类型来处理未类型化的库。

如何配置我的开发工具和IDE以在React应用程序中使用TypeScript？大多数流行的代码编辑器和IDE（如Visual Studio Code）都对TypeScript有很好的支持。您可以为您的编辑器安装TypeScript插件和扩展，以从增强的TypeScript集成、自动完成和错误检查中受益。

在迁移到TypeScript期间，我可能会遇到哪些常见挑战？常见的挑战包括解决类型错误、处理缺少类型定义的第三方库、理解TypeScript的类型系统以及适应TypeScript强制执行的更严格的类型检查。

以上是如何将React应用程序迁移到打字稿的详细内容。更多信息请关注PHP中文网其他相关文章！