【Node.js】从 JavaScript 迁移到 TypeScript：一步步指南

从 JavaScript 迁移到 TypeScript：一步步指南

作者：Alex Martinez

来源：https://lyricalstring.medium.com/migrating-from-javascript-to-typescript-a-step-by-step-guide-d45674b255c7

文章目录

- - [从 JavaScript 迁移到 TypeScript：一步步指南](#从 JavaScript 迁移到 TypeScript：一步步指南)
  - - [第 1 步：安装 TypeScript](#第 1 步：安装 TypeScript)
    - [第 2 步：初始化 TypeScript 配置](#第 2 步：初始化 TypeScript 配置)
    - [第 3 步：将 JavaScript 文件重命名为 TypeScript](#第 3 步：将 JavaScript 文件重命名为 TypeScript)
    - [第 4 步：添加类型注解](#第 4 步：添加类型注解)
    - [第 5 步：重构动态代码](#第 5 步：重构动态代码)
    - [第 6 步：修复类型错误](#第 6 步：修复类型错误)
    - [第 7 步：逐步启用严格模式](#第 7 步：逐步启用严格模式)
    - [第 8 步：庆祝 🎉](#第 8 步：庆祝 🎉)

从 JavaScript 迁移到 TypeScript：一步步指南

引言

TypeScript，一个静态类型的 JavaScript 超集，在开发者社区中因其带来的代码健壮性而获得了大量关注。但如果你有一个现有的 JavaScript 项目，你想要转换为 TypeScript 呢？这看起来可能是一个令人生畏的任务，但别担心。本文将提供一个逐步指南，告诉你如何从 JavaScript 迁移到 TypeScript，而不会破坏你现有的代码库。

第 1 步：安装 TypeScript

首先，你需要在机器上全局安装 TypeScript。打开终端并运行：

shell 复制代码

npm install -g typescript

这将全局可用 TypeScript 编译器（tsc）命令。

第 2 步：初始化 TypeScript 配置

每个 TypeScript 项目都需要一个 tsconfig.json 文件，它指定了编译项目所需的根文件和编译器选项。

通过运行以下命令，在项目的根目录初始化一个 tsconfig.json 文件：

shell 复制代码

tsc --init

这将生成一个带有默认值的 tsconfig.json 文件。你可能需要根据项目需求调整其中的一些设置。例如，如果你正在使用 React，你需要设置 "jsx": "react"。

第 3 步：将 JavaScript 文件重命名为 TypeScript

TypeScript 编译器只编译 TypeScript 文件（.ts 和 .tsx）。因此，我们需要将 JavaScript 文件重命名为 TypeScript。

对于没有 JSX 的文件：

shell 复制代码

mv myfile.js myfile.ts

对于有 JSX 的文件：

shell 复制代码

mv myfile.js myfile.tsx

注意：此时，你的 TypeScript 文件可能包含在代码是 JavaScript 时不明显的类型错误。不要惊慌；我们将在后续步骤中解决它们。

第 4 步：添加类型注解

现在，让我们开始为我们的变量、函数参数和函数返回值添加类型注解。这将帮助 TypeScript 理解我们的代码并捕获潜在的类型错误。

这是一个例子：

typescript 复制代码

function greet(name: string): string {
  return `Hello, ${name}`;
}

在这里，name 是字符串类型，greet 函数返回一个字符串。

第 5 步：重构动态代码

迁移到 TypeScript 的一个挑战是处理代码中非常动态的部分。TypeScript 的严格类型可能是这种情况下的障碍。你可能需要重构一些代码，使其更友好于类型，或者使用 TypeScript 的逃生舱口（any, 类型断言）作为最后的手段。

第 6 步：修复类型错误

到目前为止，在终端中运行 tsc 可能会给你一个类型错误的列表。这些是 TypeScript 识别到由于类型不匹配而导致潜在 bug 的代码位置。你现在的工作是逐个解决这些错误。这个过程可能是耗时的，但它是值得的。每修复一个错误，你的代码就会变得更加健壮。

第 7 步：逐步启用严格模式

TypeScript 的严格模式是一个编译器选项，它在你的代码中启用了广泛的类型检查。这对于新项目是推荐的，但对于现有项目，打开严格模式可能会导致大量类型错误。

相反，你可以逐步启用更严格的选项。从 "noImplicitAny": true 开始，然后过渡到 "strictNullChecks": true，最后是 "strict": true。

第 8 步：庆祝 🎉

祝贺你！你已经将你的 JavaScript 项目迁移到 TypeScript。庆祝你的成功，然后通过使用更具体的类型、完善 any 类型和利用 TypeScript 的高级特性来继续完善你对 TypeScript 的使用。

结论

从 JavaScript 迁移到 TypeScript 是朝着编写更可靠、可维护软件的重要一步。虽然这可能是一个具有挑战性的过程，但在防止 bug、改善开发者体验和更好工具方面的收益绝对是值得的。快乐的 TypeScript 编程！