如何将你的项目迁移成 TypeScript

我们都曾遇到过，一个 JavaScript 开发的项目，发现了一个 bug， 调试了半天，发现问题原因是 undefined is not a function。我个人很喜欢 JavaScript，但随着项目功能的增多，代码会越来越多，某些问题会一次又一次地出现。 为了避免 undefined is not a function 类似 bug，我们可以为类型加定义。TypeScript就是来帮助我们解决这类问题的工具。

在 JavaScript 中引入了一个类型系统，使您能够更好地理解代码，并帮助您完成开发流程。但我们必须面对一个现实，很多人选择静态类型语言，就是因为不用为所有变量都定义类型。

先别急着关网页，耐心继续往下看。你可以使用工具使你的项目迁移到 TypeScript。像 Webpack 就已经成功的使用了 TypeScript。我们在后面的文章中讨论这个问题。

这篇文章将会教你如何将 TypeScript 加入到自己的项目中。你也可以边看，边在你的项目中实践。

• 你可能已经在使用 TypeScript 了
• 用 VS Code 实现 JavaScript 编程
• 使用 TypeScript 编译 Javascript
  • 安装 TypeScript 编译器
  • 创建一个 TypeScript 配置
  • 为Javascript 配置 TypeScript 编译器
  • 使用 TypeScript 检查你的 Javascript
  • 寻找隐藏的 bugs
• 将 Javascript 文件转换成 TypeScript 文件
• 严格模式：引入更多的类型
• 使用 TypeScript 维护库
• TypeScript 为您效劳

请注意：文章不会介绍 TypeScript 这门语言。而是介绍你如何按自己的需要，将 TypeScript 作为工具使用。

你可能已经在使用 TypeScript 了

即使你以前没有写过一行 TypeScript, 但你也有可能已经使用过 TypeScript 了。

首先，要明确一个概念，TypeScript 包含 JavaScript，意味着任意有效的 Javascript 都可以转换成有效的 TypeScript。如果你成功的执行了 JavaScript，就意味着你已经成功的写了 TypeScript。所有没有明确类型的定义， TypeScript 都会试图尽可能的猜测类型。

由于每个有效的 Javascript 都是有效的 TypeScript，所以ni 很有可能使用了 TypeScript 的工具。 Monaco 编辑器—— 在 Visual Studio Code、 CodeSandbox、 Stackblitz 和其他编辑器后的编辑器——由 TypeScript提供更好的自动补全功能或者类似代码重构的功能。 所以，如果您曾经使用过这些编辑器的自动补全或重构功能，那么您使用的是 TypeScript！

用 VS Code 实现 JavaScript 编程

我们大部分时候不会使用 TypeScript 编译器和 TypeScript 文件。更多的是用普通的 JavaScript 工具。所以我们需要编译器来帮助我们。

Vs Code里有一个设置，您可以为整个编辑器启用该设置，也可以为特定的工作区或项目启用该设置，以便在 JavaScript 上启用 TypeScript 检查。

若要为项目启用它，请在根项目目录中创建一个文件 .vscode/settings.json。然后把下面的东西放进去:

{
   
 "javascript.implicitProjectConfig.checkJs": true
}

或者，您可以将相同的规则放入全局编辑器的设置中，或者使用设置 UI 编辑工作区设置。

现在，如果你写了一行非安全代码测试一下，TypeScript 会在你的编辑器中为你标注出来。例如，这段代码会产生一个提示:

let PORT = process.env.PORT || 3000;
PORT += 1;

process.env.PORT 是字符串类型，但是 3000 是数字类型。此时 PORT += 1 就会有不同的两种类型的结果。字符串的话，就会追加一个字符 1 在尾部，但是数字的话就会是 3001 的结果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pc8nQZgk-1579141267620)(https://twilio-cms-prod.s3.amazonaws.com/images/Yy6PGxzdZAgeCOa31cDBrrs41XEU8qT4-BwPfhxC8VLOZ.width-1000.png)]

这个错误提示并不会影响代码，因为它们只在编辑器中显示。即使抛出了错误，但你的代码仍然会运行。与此同时，提醒您有可能在测试过程中没有考虑到情况。

但如果你有意想违反某些规则，那这种设置有时也会令人讨厌。在这种情况下，那你可以打开它，或者通过在每行上面添加下面的注释来禁用类型检查。

// @ts-ignore

要禁用全部类型检查，可以使用以下命令:

// @ts-nocheck

我个人很喜欢这个设置，并且通常都会开启检查。因为它会让我思考我编写的每一行 JavaScript 代码，是否可能出现我从未考虑到的边缘情况。这对我们写代码来说，有很大帮助。

使用 TypeScript 编译 Javascript

我们在 VS Code 中启用的设置实际上是在 TypeScript 编译器上设置了一个叫做 checkJs 的设置。它与另一个名为 allowJs 的设置有关，该设置通过 TypeScript 解析器运行 JavaScript 文件。这是将现有的 JavaScript 项目逐步转换为 TypeScript 的完美开始。

为了向你展示它是如何工作的，我将使用下面的项目作为示例: github.com/dkundel/ts-move-demo

大家可以 clone 到本地按步骤学习。

安装 TypeScript 编译器

首先我们要安装 TypeScript 编译器。TypeScript 可以从 npm 上下载，然后对外暴露了 tsc 的命令。 可以在不同的项目中安装不同版本的编辑器，也可以在全局安装。

要在本地为项目运行安装 TypeScript 编译器:

npm install -D typescript

我还建议在 package.json 的 scripts 部分设置一个新的构建脚本:

"scripts": {
   
   "start": "node .",
   "build": "tsc",
   "test": "echo \"Error: no test specified\" && exit 1"
 },

构建可以使用 npm run build，如果想运行 TypeScript ，也可以在观察模式， npm run build -- --watch，或者执行另一个脚本， tsc --watch。

创建一个 TypeScript 配置

如果你不想经常通过命令行参数向 TypeScript 编译器传递一大堆配置选项。那我建议你创建一个 tsconfig.json。有两种方法可以做到这一点。可以手动创建文件，也可以执行 tsc --init