从 JavaScript 迁移到 TypeScript

以下是从 JavaScript 迁移到 TypeScript 所必需的：

• 您了解 JavaScript。
• 您了解项目中使用的模式和构建工具。

假设我们有一些需要转换为 TypeScript 的 JavaScript 文件。 我们知道，当我们编译 TypeScript 文件时，它会生成具有相同名称的相应 JavaScript 文件。 在这里，我们需要确保作为输入的原始 JavaScript 文件不能位于同一目录中，以防止 TypeScript 覆盖它们。

从以上几点来看，我们将假设我们的目录设置为如下结构。 在这里，我们将所有输出文件保存在一个名为“built”的输出目录中。

我们可以使用以下流程从 JavaScript 迁移到 TypeScript：

1. 向项目添加 tsconfig.json 文件。
2. 与构建工具集成。
3. 将所有 .js 文件移动到 .ts 文件。
4. 检查错误。
5. 使用第三方 JavaScript 库。

1. 向项目添加 tsconfig.json 文件

首先，我们需要在我们的项目中添加一个 tsconfig.json 文件。 TypeScript 使用 tsconfig.json 文件来管理我们项目的编译选项，例如我们要 include 和 exclude 的文件。

在上面的文件中，我们向 TypeScript 指定了一些内容：

• include 选项读取 src 目录中的所有文件。
• allowJs 选项接受所有 JavaScript 文件作为输入。
• outDir 指定所有输出文件都应重定向到 built 文件夹中。
• target 选项指定所有 JavaScript 构造都应转换为旧版本，如 ECMAScript 5。

2. 与构建工具集成

我们知道，大多数 JavaScript 项目都具有集成的构建工具，例如 gulp 或 webpack。

注意：每个构建工具都不同。

我们可以通过以下方式将项目与 webpack 集成：

a) 在终端上运行以下命令

在 webpack 集成中，我们使用 awesome-typescript-loader (一个 TypeScript loader) 与 source-map-loader 结合使用，以便更轻松地调试源代码。

b) 合并 webpack.config.js 文件中的模块配置属性，以包含以下 loaders

3. 将所有 .js 文件移动到 .ts 文件

在本节中，我们必须将我们的 .js 文件重命名为 .ts 文件。 类似地，如果我们的文件使用 JSX，我们将需要将其重命名为 .tsx。 现在，如果我们在支持 TypeScript 的编辑器中打开该文件，我们的一些代码可能会开始给出编译错误。 因此，逐个转换文件可以更轻松地处理编译错误。 如果 TypeScript 在转换过程中发现任何编译错误，它仍然能够像 Word 打印我们的文档一样翻译代码。

4. 检查错误

将 js 文件移动到 ts 文件后，TypeScript 会立即开始对我们的代码进行类型检查。 因此，我们在 JavaScript 代码中收到诊断错误。 我们可能会遇到的一些错误如下所列：

a) 我们可以使用 any 来抑制错误，例如：

在下面的代码中，我们可以通过使用类型断言来删除错误。

b) 参数过少或过多的函数

在上面的代码中，函数 display() 接受三个参数：name、age 和 height。 我们可以使用两个值调用此函数：“Rohit”和 23。这在 JavaScript 中是完全有效的，因为在 JavaScript 中，如果函数的预期参数缺失，它会将 undefined 值分配给该参数。

但是，TypeScript 中的相同代码将给出编译错误：Expected three arguments but got two。 为了消除此错误，我们可以将可选参数符号添加到参数 height，并将我们的代码注释如下：

c) 顺序添加的属性

以下代码在 JavaScript 中非常常见。

在 TypeScript 中，作为 {} 的 options 类型是一个空对象。 因此，color 和 volume 不存在且不可分配。 如果我们改为将声明移动到对象文字本身中，我们将不会收到任何错误

我们还可以定义 options 的类型，并在对象文字上添加类型断言。

5. 使用第三方 JavaScript 库

JavaScript 项目使用第三方库，如 jQuery 或 Lodash。 为了编译文件，TypeScript 需要知道这些库中所有对象的类型。 我们知道，JavaScript 库的 TypeScript 类型定义文件已在 DefinitelyTyped 上提供。 因此，我们不需要在外部安装此类型。 我们只需要安装在我们的项目中使用的那些类型。

例如

对于 jQuery，安装定义

对于 Lodash，安装定义

一旦我们对我们的 JavaScript 项目进行了更改，请运行构建工具。 现在，我们应该将我们的 TypeScript 项目编译成纯 JavaScript，我们可以在浏览器中运行它。