4 TypeScript 是如何工作的？鸟瞰

本章从宏观角度介绍 TypeScript 的工作原理：典型的 TypeScript 项目结构是什么？如何编译以及编译什么？我们如何使用 IDE 编写 TypeScript 代码？

4.1 TypeScript 项目的结构

这是 TypeScript 项目的一种可能的目录结构

typescript-project/
  dist/
  ts/
    src/
      main.ts
      util.ts
    test/
      util_test.ts
  tsconfig.json

说明

• 目录 ts/ 包含 TypeScript 文件
  • 子目录 ts/src/ 包含实际代码。
  • 子目录 ts/test/ 包含代码的测试。
• 目录 dist/ 是存储编译器输出的位置。
• TypeScript 编译器将 ts/ 中的 TypeScript 文件编译为 dist/ 中的 JavaScript 文件。例如
  • ts/src/main.ts 被编译为 dist/src/main.js（以及可能的其他文件）
• tsconfig.json 用于配置 TypeScript 编译器。

4.1.1 tsconfig.json

tsconfig.json 的内容如下所示

{
  "compilerOptions": {
    "rootDir": "ts",
    "outDir": "dist",
    "module": "commonjs",
    ···
  }
}

我们已经指定了

• TypeScript 代码的根目录是 ts/。
• TypeScript 编译器保存其输出的目录是 dist/。
• 输出文件的模块格式是 CommonJS。

4.2 通过集成开发环境 (IDE) 编写 TypeScript 代码

两个流行的 JavaScript IDE 是

• Visual Studio Code (免费)
• WebStorm (付费)

本节中的观察结果是关于 Visual Studio Code 的，但也可能适用于其他 IDE。

需要注意的一个重要事实是，Visual Studio Code 以两种独立的方式处理 TypeScript 源代码

• 检查打开的文件是否有错误：这是通过所谓的 语言服务器 完成的。语言服务器独立于特定的编辑器存在，并为 Visual Studio Code 提供与语言相关的服务：检测错误、重构、自动完成等。与服务器的通信通过基于 JSON-RPC 的协议进行（RPC 代表 远程过程调用）。该协议提供的独立性意味着服务器可以用几乎任何编程语言编写。
  • 需要记住的重要事实：语言服务器仅列出当前打开文件的错误，并且不编译 TypeScript，它只对其进行静态分析。
• 构建（将 TypeScript 文件编译为 JavaScript 文件）：这里，我们有两个选择。
  • 我们可以通过外部命令行运行构建工具。例如，TypeScript 编译器 tsc 有一个 --watch 模式，它会监视输入文件并在它们发生更改时将它们编译为输出文件。因此，每当我们在 IDE 中保存 TypeScript 文件时，我们都会立即获得相应的输出文件。
  • 我们可以在 Visual Studio Code 中运行 tsc。为此，它必须安装在我们当前正在处理的项目中或全局安装（通过 Node.js 包管理器 npm）。
  通过构建，我们可以获得完整的错误列表。有关从 Visual Studio Code 中编译 TypeScript 的更多信息，请参阅该 IDE 的官方文档。

4.3 TypeScript 编译器生成的其他文件

给定一个 TypeScript 文件 main.ts，TypeScript 编译器可以生成几种工件。最常见的是

• JavaScript 文件：main.js
• 声明文件：main.d.ts（包含类型信息；可以理解为删除了 JavaScript 代码的 .ts 文件）
• 源映射文件：main.js.map

TypeScript 通常不是通过 .ts 文件交付的，而是通过 .js 文件和 .d.ts 文件交付的

• JavaScript 代码包含实际功能，可以通过纯 JavaScript 使用。
• 声明文件帮助编程编辑器进行自动完成和类似服务。此信息使纯 JavaScript 可以通过 TypeScript 使用。但是，即使我们使用纯 JavaScript，我们也能从中受益，因为它为我们提供了更好的自动完成等等。

源映射为 main.js 中输出代码的每个部分指定了 main.ts 中输入代码的哪个部分生成了它。除其他外，此信息使运行时环境能够执行 JavaScript 代码，同时在错误消息中显示 TypeScript 代码的行号。

4.3.1 为了使用 TypeScript 中的 npm 包，我们需要类型信息

npm 注册表是一个巨大的 JavaScript 代码库。如果我们想在 TypeScript 中使用 JavaScript 包，我们需要它的类型信息

• 包本身可能包含 .d.ts 文件，甚至包含完整的 TypeScript 代码。
• 如果没有，我们仍然可以使用它：DefinitelyTyped 是一个人们为纯 JavaScript 包编写的声明文件存储库。

DefinitelyTyped 的声明文件位于 @types 命名空间中。因此，如果我们需要一个包（例如 lodash）的声明文件，我们必须安装 @types/lodash 包。

4.4 将 TypeScript 编译器用于纯 JavaScript 文件

TypeScript 编译器也可以处理纯 JavaScript 文件

• 使用 --allowJs 选项，TypeScript 编译器会将输入目录中的 JavaScript 文件复制到输出目录。好处：当从 JavaScript 迁移到 TypeScript 时，我们可以从 JavaScript 和 TypeScript 文件的混合开始，并逐渐将更多 JavaScript 文件转换为 TypeScript。

• 使用 --checkJs 选项，编译器还会对 JavaScript 文件进行类型检查（此选项需要启用 --allowJs 才能工作）。鉴于可用信息的有限性，它会尽力而为。可以通过文件内部的注释来配置要检查哪些文件

  • 显式排除：如果 JavaScript 文件包含注释 // @ts-nocheck，则不会对其进行类型检查。
  • 显式包含：如果没有 --checkJs，则可以使用注释 // @ts-check 对单个 JavaScript 文件进行类型检查。

• TypeScript 编译器使用通过 JSDoc 注释指定的静态类型信息（请参阅下面的示例）。如果我们很彻底，我们可以对纯 JavaScript 文件进行完全静态类型化，甚至可以从中派生出声明文件。

• 使用 --noEmit 选项，编译器不会生成任何输出，它只对文件进行类型检查。

这是一个 JSDoc 注释的示例，它为函数 add() 提供了静态类型信息

/**
 * @param {number} x - The first operand
 * @param {number} y - The second operand
 * @returns {number} The sum of both operands
 */
function add(x, y) {
  return x + y;
}

更多信息：TypeScript 手册中的JavaScript 文件的类型检查。