TypeScript 是怎样工作的？

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

 

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/src/main.ts 之类的 TypeScript 文件编译为 JavaScript 文件 dist/src/main.js （可能还有其他文件）。
• tsconfig.json 用于配置 TypeScript 编译器。

tsconfig.json

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

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

我们已指定：

• 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 的官方文档。

 

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是人们为普通 JavaScript 包编写的声明文件的库。

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

电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

将 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，编译器不会产生任何输出，它只会对文件进行类型检查。

This is an example of a JSDoc comment that provides static type information for a function add():
这是一个 JSDoc 注释的例子，它为函数 add() 提供静态类型信息：

/**
 * @param {number} x - A number param.
 * @param {number} y - A number param.
 * @returns {number} This is the result
 */
function add(x, y) {
  return x + y;
}