老板说，老板说给我把这个 JS React 项目迁移到 TypeScript

作者：ssh前端 2023-07-07 08:02:48开发 前端 架构在处理这些挑战时，把个始终参考 TypeScript 的项目文档、社区和资源。迁移TypeScript 有一个强大的老板说社区支持，你可以从中获取帮助、把个指导和最佳实践建议。项目

Hi，迁移我是老板说 ssh，在我做前端的把个过程中，TypeScript + React 迅速的项目风靡起来，新项目越来越多的迁移默认启用 TypeScript 做类型保护，它的老板说各种好处对于长期维护的项目已经无需多言。那么，把个对于一些老旧但是项目还需要继续维护的 React JavaScript 项目来说，迁移到 TypeScript 就非常有价值了。下面我来给大家分享一下这篇很有参考价值的 Converting JavaScript codebase to TypeScript：

正文

在我们日益发展的网络开发领域中，JavaScript 长期以来一直是首选的语言。它的多功能性和普及性推动了许多应用和网站取得成功。然而，随着项目规模和复杂性的增长，维护 JavaScript 代码库可能变得具有挑战性、容易出错且难以扩展。

走出来的第一步是 TypeScript，这是 JavaScript 的一个革命性超集，提升了你的编程体验。TypeScript 通过引入静态类型和多种复杂功能，使程序员能够编写更健壮、可扩展和易维护的代码。

在本文中，我们将重点讨论将 JavaScript React 应用程序转换为 TypeScript，并深入探讨以下目标：

• 探索 TypeScript 的重要性及其对代码安全性的影响。
• 解释手动将 JavaScript 项目转换为 TypeScript 的过程。
• 提供成功完成转换过程的逐步指导和技巧。

TypeScript 简介：

TypeScript 是 JavaScript 的静态类型超集，通过引入额外的功能和严格的类型检查，扩展了 JavaScript 的能力。以下是 TypeScript 及其与 JavaScript 的关系、其主要特点和优势，以及它在提高代码安全性和可维护性方面的作用的摘要：

1. TypeScript 是什么以及它与 JavaScript 的关系是什么？

TypeScript 是由 Microsoft 开发的编程语言。

它是 JavaScript 的超集，这意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。

TypeScript 引入了静态类型，允许开发人员为变量、函数参数和返回值定义类型。

TypeScript 代码会被转译为纯 JavaScript 代码，可以由任何现代 Web 浏览器或 JavaScript 运行时执行。

2. TypeScript 在增强代码安全性和可维护性方面的作用：

• 静态类型：通过为 JavaScript 代码添加静态类型，TypeScript 有助于在编译时捕获与类型相关的错误，减少运行时错误的可能性。
• 错误的早期检测：TypeScript 的类型检查器在开发过程中识别潜在问题，使开发人员能够在部署之前解决这些问题。
• 改善代码可读性和可维护性：TypeScript 中使用类型注解和清晰的接口使代码更加自解释，更易于理解和维护。
• 重构和工具支持：TypeScript 的强类型使得强大的重构能力和增强的工具支持成为可能，从而使代码更可靠、更高效地进行更改。
• 团队协作：TypeScript 通过在代码库的不同部分之间提供更清晰的约定，促进开发团队之间更好的协作。

通过利用 TypeScript，开发人员可以增强代码安全性，提前捕获错误，改善代码的可维护性，并享受更强大和可扩展的代码库带来的好处。

TypeScript 的设置步骤：

1. 安装 TypeScript 及其先决条件：在计算机上全局安装 TypeScript，打开命令行界面并运行以下命令：

npm install -g typescript

2. 配置开发环境中的 TypeScript：

• 创建一个新目录用于 TypeScript 项目，并使用命令行进入该目录。
• 运行以下命令生成一个带有默认设置的基本tsconfig.json文件：

tsc --init

• 这将在项目目录中创建一个tsconfig.json文件。
• 使用文本编辑器打开tsconfig.json文件。
• 修改"outDir"属性以指定所需的输出目录。例如，将其更改为：

"outDir": "./dist"

• 保存tsconfig.json文件。

3. 将 TypeScript 集成到现有的 JavaScript 项目中：

• 在"my-typescript-project"目录中，创建一个名为app.ts的新文件。这将是你的 TypeScript 文件。
• 使用文本编辑器打开app.ts文件并编写一些 TypeScript 代码。例如：

function greet(name: string) {    console.log("Hello, " + name + "!"); } greet("John");

• 保存app.ts文件。
• 打开命令行界面并使用cd命令导航到"my-typescript-project"目录。
• 使用以下命令运行 TypeScript 编译器（tsc）：

tsc

• TypeScript 编译器将根据tsconfig.json文件中的设置，编译目录中的所有 TypeScript 文件（包括app.ts）。
• 编译后的 JavaScript 文件将输出到指定的输出目录（根据tsconfig.json文件的配置）。
• 现在，你可以使用 JavaScript 运行时运行生成的 JavaScript 代码，或者打开包含编译后 JavaScript 文件的 HTML 文件。

太棒了！你已成功设置了 TypeScript 开发环境 🎉

将 JavaScript 转换为 TypeScript：

在将 JavaScript 代码转换为 TypeScript 时，遵循策略和最佳实践以确保平稳过渡非常重要。根据我在 TypeScript 上的经验，我推荐一些最佳实践，以有效地将 JavaScript 代码转换为 TypeScript，并充分利用 TypeScript 的特性，确保成功的转换过程。

将 JavaScript 代码转换为 TypeScript 的策略和最佳实践。

1. 了解差异： 熟悉 JavaScript 和 TypeScript 之间的主要差异。TypeScript 引入了静态类型、接口、类、模块和其他高级功能。了解这些差异将帮助你有效地利用 TypeScript。
2. 制定计划： 从评估转换的范围开始。确定你是要转换整个代码库还是特定模块。创建一个路线图或清单，以跟踪进度并优先处理转换任务。
3. 逐步转换： 考虑采用渐进式的方法，特别是对于较大的项目。从转换小型、自包含的模块或组件开始。这样可以逐步熟悉 TypeScript，并逐步测试转换后的代码。
4. 利用 TypeScript 的特性： 利用 TypeScript 的特性提高代码质量和可维护性。使用静态类型来尽早捕捉错误并提供更好的代码文档。探索接口、枚举和泛型等高级特性，以强制执行更严格的类型检查并改进代码组织。
5. 使用 TypeScript 编译器： 配置 TypeScript 编译器（tsc）以执行更严格的类型检查，并及早提供与类型相关的反馈。根据项目的要求，在 tsconfig.json 文件中调整编译器选项。
6. 利用 TypeScript 工具： 使用支持 TypeScript 的编辑器和集成开发环境（IDE），提供自动完成、类型检查和重构支持。例如，TypeScript 的语言服务等工具可以大大提升你的开发体验。
7. 全面测试： 在将 JavaScript 转换为 TypeScript 时，请进行全面测试，以捕捉转换过程中引入的任何问题或回归。创建测试用例并进行单元测试，以验证转换后代码的行为。

将 React JavaScript 项目转换为 TypeScript：

将 JavaScript 项目转换为 TypeScript 涉及对代码库进行更改和更新配置。下面是将 React JavaScript 项目转换为 TypeScript 的逐步方法，包括代码片段和项目树结构：

1. 安装 TypeScript：

npm install --save-dev typescript

打开命令行界面并导航到 React 项目的根目录。

运行以下命令将 TypeScript 安装为开发依赖项：

1. 重命名 JavaScript 文件：

• 确定要转换的项目中的 JavaScript 文件。
• 将文件重命名为.tsx扩展名，而不是.js。例如，将App.js重命名为App.tsx。

2. 更新 tsconfig.json：

{    "compilerOptions": {      "jsx": "react-jsx", // 如果使用JSX语法     "module": "esnext",     "target": "es5",     "strict": false,     "esModuleInterop": true   } }

各种编译器选项用于配置 TypeScript 编译器的行为。以下是上述选项的快速回顾：

• "esModuleInterop": true：此属性在 TypeScript 的 ES 模块和 CommonJS 模块之间启用互操作性。它允许在使用 CommonJS 模块时使用默认导入和导出。
• "jsx": "react-jsx"：此属性指定在 TypeScript 文件中用于 JSX 的语法。在这种情况下，它表示正在使用 React JSX 语法。
  
• "module": "esnext"：此属性确定模块代码的生成方式。在这里，它设置为"esnext"，允许使用现代 JavaScript 模块语法，如import和export。
  
• "target": "es5"：此属性设置输出的 ECMAScript 版本。它指定编译后的 JavaScript 代码应与 ECMAScript 5 兼容，这是一个较旧的 JavaScript 版本，在各种浏览器和环境中广泛支持。
  
• "strict": false：启用严格模式将使 TypeScript 对代码库进行严格的类型检查。我们将其设置为false，以减少从 JavaScript 迁移到 TypeScript 时的类型错误数量。

尽管确实可以在文件中将"strict": false设置为true，以减少从 JavaScript 迁移到 TypeScript 时的类型错误数量，但不建议在迁移到 TypeScript 后的项目中这样做。TypeScript 中的"strict"编译器选项启用了一组严格的类型检查规则，以确保更安全、更可靠的代码。通过将"strict": true设置为true，TypeScript 可以执行最佳实践，并在编译时捕获潜在的错误，使你能够及早解决它们并改进代码质量。

• 如果尚不存在，请在项目的根目录中创建tsconfig.json文件。
• 打开tsconfig.json文件并更新以下选项：

这些属性与tsconfig.json文件中提供的其他属性一起，可以根据项目的具体要求配置 TypeScript 编译器。

4. 解决外部库：

npm install --save-dev @types/react @types/react-dom

确定项目中使用的任何没有 TypeScript 支持的外部库或依赖项。

使用 DefinitelyTyped（https://definitelytyped.org/[1]）或其他社区存储库搜索这些库的 TypeScript 类型声明文件（.d.ts）。

使用 npm 或 yarn 安装类型声明文件。例如：

4. 类型注释：

interface Props {    name: string;   age: number; } const MyComponent: React.FC<Props> = ({  name, age }) => {    // 组件代码在这里 };

• 开始向代码库添加类型注释。
• 从 React 组件的 prop 类型开始，使用 TypeScript 接口或类型进行注释。例如：

4. 解决类型错误：

npx tsc

• 通过使用正确的类型或解决任何不一致性来解决报告的类型错误。
• 运行 TypeScript 编译器以识别代码库中的任何类型错误或警告：

5. 测试和重构：
   

• 在转换后，对代码库进行彻底测试，以确保功能和正确性。
• 考虑重构代码，以利用 TypeScript 的功能，例如使用更具体的类型和利用接口来改善代码组织和文档。

项目树结构：

- src/  - components/    - App.tsx    - ...  - index.tsx- tsconfig.json- package.json- ...

恭喜！你已成功将 React JavaScript 代码库转换为 TypeScript🎉

处理转换过程中的常见问题：

将 JavaScript 代码转换为 TypeScript 可能会遇到一些常见问题。以下是一些可能的挑战以及应对方法：

1. 缺少类型信息： 由于 JavaScript 是一种动态类型语言，它可能缺乏类型信息。在转换过程中，可能需要对变量、函数参数和返回类型进行推断或手动注释。
2. 外部库的类型声明缺失： 如果项目依赖于没有类型声明的外部库，你可能需要查找或创建相应的类型声明文件。
3. 类型错误和警告： TypeScript 编译器可能会报告一些类型错误或警告。这些错误可能涉及类型不匹配、缺少属性或其他类型不一致性。你需要逐个解决这些错误，并根据需要更正代码。
4. 学习曲线： 从 JavaScript 迁移到 TypeScript 可能需要一些学习和适应时间。熟悉 TypeScript 的特性和最佳实践，并逐步使用它们来改进代码质量和可维护性。

在处理这些挑战时，始终参考 TypeScript 的文档、社区和资源。TypeScript 有一个强大的社区支持，你可以从中获取帮助、指导和最佳实践建议。

希望这些步骤和策略能够帮助你顺利地将 JavaScript 项目转换为 TypeScript 项目！祝你成功。

参考：https://dev.to/documatic/converting-javascript-codebase-to-typescript-1852

责任编辑：武晓燕 来源： 前端从进阶到入院 TypeScript编译器文档

(责任编辑：热点)