十分钟了解 TypeScript 是如怎样工作的

西北望msm66g9f 2020-05-06

展开全文

每日前端夜话第322篇

翻译：疯狂的技术宅

作者：Dr. Axel Rauschmayer

来源：2ality

正文共：1956 字

预计阅读时间：10 分钟

本文概述了 TypeScript 的工作原理：典型的 TypeScript 项目的结构是什么？什么被编译以及怎样编译？我们如何使用 IDE 编写 TypeScript？

TypeScript项目的结构

以下是 TypeScript 项目的一种可能的文件结构：

1typescript-project/
2  dist/
3  ts/
4    src/
5      main.ts
6      util.ts
7    test/
8      util_test.ts
9  tsconfig.json

说明：

目录 ts/ 包含 TypeScript 文件：

子目录 ts/src/ 包含实际代码。
子目录 ts/test/ 包含代码测试。

目录 dist/ 是编译器的输出位置。
TypeScript 编译器将诸如 ts/src/main.ts 之类的 TypeScript 文件编译为 JavaScript 文件 dist/src/main.js （可能还有其他文件）。
tsconfig.json 用于配置 TypeScript 编译器。

`tsconfig.json`

tsconfig.json tsconfig.json的内容如下：

1{
2  'compilerOptions': {
3    'rootDir': 'ts',
4    'outDir': 'dist',
5    'module': 'commonjs',
6    ···
7  }
8}

我们已指定：

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

通过集成开发环境（IDE）编程 TypeScript

Visual Studio Code 是用于编写 TypeScript 代码的最受欢迎的 IDE 之一。为了更好地使用它，我们需要了解 TypeScript 源代码是以两种独立的方式处理的：

检查打开的编辑器是否存在错误：这是通过所谓的 language server 完成的。它们是与编辑器无关的方法，可为编辑器提供与语言相关的服务（检测错误、重构、自动完成等）。编辑器（例如IDE）通过特殊协议（JSON-RPC，即基于JSON的远程过程调用）与语言服务器进行通信。这样一来，几乎可以用任何编程语言编写此类服务器。

要记住：language server 仅列出当前打开的编辑器的错误，且不编译 TypeScript，而是仅仅静态分析它。

Building（将 TypeScript 文件编译为 JavaScript 文件）：在这里，我们有两个选择。
我们可以通过命令行运行构建工具。例如，TypeScript 编译器 tsc 有 --watch 模式，该模式可以监视输入文件，并在更改文件时将其编译为输出文件。这样，每当我们在 IDE 中保存 TypeScript 文件时，都会立即获得相应的输出文件。
我们可以在 Visual Studio Code 中运行 tsc。为此，必须将其安装在我们当前正在开发的项目内部或进行全局安装（通过 Node.js 包管理器 npm）。

通过构建，我们可以获得完整的错误列表。有关在 Visual Studio Code 中编译 TypeScript 的更多信息，请参见该 IDE 的官方文档(https://code./docs/typescript/typescript-compiling)。

TypeScript 编译器生成的其他文件

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

JavaScript文件：main.js
声明文件：main.d.ts（包含类型信息）
源码映射文件：main.js.map

TypeScript 通常不是通过 .ts 文件提供的，而是通过 .js 文件和 .d.ts 文件提供：

JavaScript 代码包含实际的功能，可以通过普通 JavaScript 使用。
声明文件可帮助编程编辑者实现自动补全和类似的服务。此信息使普通 JavaScript 可以通过 TypeScript 使用。但是如果使用纯 JavaScript，我们甚至会从中受益，因为它可以提供更好的自动完成以及更多功能。

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

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

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

软件包本身可能包含 .d.ts 文件，甚至完整的 TypeScript 代码。
如果没有，我们仍然可以使用它：DefinitelyTyped (https:///)是为普通 JavaScript 包编写的声明文件的库。

DefinitelyTyped 的声明文件位于 @types 命名空间中。所以如果我们需要像 lodash 这样的包的声明文件，则必须安装 @types/lodash 包。

将 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() 提供静态类型信息：

1/**
2 * @param {number} x - A number param.
3 * @param {number} y - A number param.
4 * @returns {number} This is the result
5 */
6function add(x, y) {
7  return x + y;
8}