从 JavaScript 迁移到 TypeScript

TypeScript 是 JavaScript 的超集，提供了比 JavaScript 更多的特性。在任何项目中使用 TypeScript 而不是 JavaScript 的主要目的是为了实现类型安全，因为 TypeScript 允许为每个变量、函数参数、函数返回类型等定义类型。

此外，TypeScript 还具有静态类型检查等特性，并支持类、接口、模块和其他 JavaScript 不支持的高级特性。在这里，您将学习如何将您的 JavaScript 代码迁移到 TypeScript。

为什么要从 JavaScript 迁移到 TypeScript？

以下是一些任何人应该在 JavaScript 之上使用 TypeScript 的原因

类型安全：TypeScript 的核心特性是其执行静态类型检查的能力。
改进代码质量：TypeScript 可以在开发过程的早期捕获错误，这可以节省软件开发的成本和时间。
高级特性：TypeScript 支持接口等高级特性，而 JavaScript 不支持。
可扩展性：使用 TypeScript 更容易管理和扩展大型代码库。

从 JavaScript 迁移到 TypeScript 的步骤

您可以按照以下步骤将您的 JavaScript 代码迁移到 TypeScript

先决条件

您应该有一个包含 JavaScript 代码的 JavaScript 文件。

步骤 1：设置您的环境

如果您尚未安装 TypeScript，您可以在终端中执行以下命令来安装 TypeScript

npm install -g typescript

步骤 2：在项目中添加 tsconfig.json 文件

将 JavaScript 项目转换为 TypeScript 项目的主要部分是在项目的根目录中添加 tsconfig.json 文件。

tsconfig.json 文件包含一个包含各种属性的单个 JSON 对象。它定义了将 TypeScript 代码编译成纯 JavaScript 代码的配置。

您可以创建一个新的 tsconfig.json 文件，并将以下代码添加到其中

 {
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es6",
        "lib": [
            "es6",
            "dom"
        ],
        "module": "commonjs",
    }
    "include": [
        "src/**/*"
    ],
}

但是，您也可以根据您的需求在 tsconfig.json 文件中删除某些属性或添加某些属性。

步骤 3：将 JavaScript 文件转换为 TypeScript 文件

现在您可以使用 TypeScript 文件了。TypeScript 编译器仅编译 TypeScript 文件（.ts 和 .tsx）。将其中一个 .js 文件重命名为 .ts。如果您的文件包含 JSX，则将其重命名为 .tsx。重命名文件后，您可能会注意到 TypeScript 文件可能包含一些类型错误。为了处理类型错误，我们执行类型注解。

添加类型注解

将 JavaScript 文件重命名为 TypeScript 文件后，我们开始向变量、函数参数和返回类型添加类型注解。这将帮助 TypeScript 编译器捕获潜在的错误。让我们举个例子。

假设，我们在 JavaScript 文件中具有以下代码

function add(a, b) {
  return a + b;
}

以上代码包含 add() 函数，该函数以 ‘a’ 和 ‘b’ 两个变量作为参数，并返回它们的和。

为了将以上代码转换为 TypeScript，您需要为函数参数添加类型，并为函数指定返回类型。

function add(a: number, b: number): number {
  return a + b;
}

在这里，我们为两个参数和函数的返回类型都使用了 number 类型。

步骤 4：解决错误并安装外部库

将 JavaScript 代码转换为 TypeScript 后，确保解决代码编辑器中给出的任何错误。否则，在将 TypeScript 代码编译成纯 JavaScript 代码时，您也会收到错误。

如果您在 JavaScript 项目中使用外部库，则可以使用 Node 包管理器 (NPM) 在 TypeScript 项目中安装这些库。如果您不安装这些外部库，编译器将抛出错误。

步骤 5：编译 TypeScript 代码

解决错误后，在终端中执行以下命令以编译 TypeScript 代码

npx tsc filename

在上述命令中，您可以用 TypeScript 文件的实际名称替换 filename。

执行命令后，它将生成一个与 TypeScript 文件同名的 JavaScript 文件。此 JavaScript 文件可以像普通 JavaScript 文件一样与 HTML 一起使用或使用 NodeJS 执行。

本课讲解了将您的 JavaScript 项目转换为 TypeScript 的基本步骤。但是，借助这些步骤，您还可以将复杂的 JavaScript 项目转换为 TypeScript。

打印页面