编译 TypeScript

TypeScript 是 JavaScript 的一个类型化超集，它可以转译为纯 JavaScript。它提供了类、模块和接口，帮助您构建健壮的组件。

安装 TypeScript 编译器

Visual Studio Code 包含了 TypeScript 语言支持，但不包含 TypeScript 编译器 `tsc`。您需要全局或在工作区中安装 TypeScript 编译器，才能将 TypeScript 源代码转译为 JavaScript（`tsc HelloWorld.ts`）。

安装 TypeScript 最简单的方法是通过 npm，即 Node.js 包管理器。如果您已安装 npm，可以通过以下方式在您的计算机上全局安装 TypeScript (`-g`)：

npm install -g typescript

您可以通过检查版本或获取帮助来测试您的安装。

tsc --version
tsc --help

另一个选项是在您的项目中本地安装 TypeScript 编译器（`npm install --save-dev typescript`），这样做的好处是可以避免与您可能拥有的其他 TypeScript 项目产生潜在的交互。

编译器与语言服务

需要注意的是，VS Code 的 TypeScript 语言服务与您安装的 TypeScript 编译器是独立的。当您打开 TypeScript 文件时，可以在语言状态栏项中看到 VS Code 的 TypeScript 版本。

在本文后面，我们将讨论如何更改 VS Code 使用的 TypeScript 语言服务版本。

tsconfig.json

通常，任何新的 TypeScript 项目的第一步是添加一个 `tsconfig.json` 文件。`tsconfig.json` 文件定义了 TypeScript 项目设置，例如编译器选项和应包含的文件。为此，打开您希望存储源代码的文件夹并添加一个名为 `tsconfig.json` 的新文件。一旦进入此文件，IntelliSense (⌃Space (Windows, Linux Ctrl+Space)) 将一路为您提供帮助。

一个简单的 `tsconfig.json` 文件（用于 ES5、CommonJS 模块和源映射）如下所示：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "sourceMap": true
  }
}

现在，当您作为项目的一部分创建 `.ts` 文件时，我们将提供丰富的编辑体验和语法验证。

将 TypeScript 转译为 JavaScript

VS Code 通过我们集成的任务运行器与 `tsc` 集成。我们可以使用它将 `.ts` 文件转译为 `.js` 文件。使用 VS Code 任务的另一个好处是，您可以在问题面板中看到集成的错误和警告检测。让我们来看看如何转译一个简单的 TypeScript Hello World 程序。

步骤 1：创建一个简单的 TS 文件

在一个空文件夹中打开 VS Code 并创建一个 `helloworld.ts` 文件，将以下代码放入该文件中...

let message: string = 'Hello World';
console.log(message);

要测试您是否正确安装了 TypeScript 编译器 `tsc` 并有一个可工作的 Hello World 程序，请打开终端并键入 `tsc helloworld.ts`。您可以直接在 VS Code 中使用集成终端 (⌃` (Windows, Linux Ctrl+`))。

现在您应该会看到转译后的 `helloworld.js` JavaScript 文件，如果您安装了 Node.js，可以通过键入 `node helloworld.js` 来运行它。

步骤 2：运行 TypeScript 构建

从全局 终端 菜单执行 运行生成任务 (⇧⌘B (Windows, Linux Ctrl+Shift+B))。如果您在前面的部分创建了一个 `tsconfig.json` 文件，这将显示以下选择器：

选择 tsc: build 条目。这将在工作区中生成一个 `HelloWorld.js` 和 `HelloWorld.js.map` 文件。

如果您选择了 tsc: watch，TypeScript 编译器将监视您的 TypeScript 文件的更改，并在每次更改时运行转译器。

在底层，我们将 TypeScript 编译器作为任务运行。我们使用的命令是：`tsc -p .`

步骤 3：将 TypeScript 生成设为默认

您还可以将 TypeScript 构建任务定义为默认构建任务，以便在触发 运行生成任务 (⇧⌘B (Windows, Linux Ctrl+Shift+B)) 时直接执行。为此，请从全局 终端 菜单中选择 配置默认生成任务。这将显示一个包含可用构建任务的选择器。选择 TypeScript tsc: build，这将在 `.vscode` 文件夹中生成以下 `tasks.json` 文件：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

请注意，任务有一个 `group` JSON 对象，它将任务的 `kind` 设置为 `build` 并使其成为默认值。现在，当您选择 运行生成任务 命令或按下 (⇧⌘B (Windows, Linux Ctrl+Shift+B)) 时，您将不会被提示选择任务，并且您的编译将开始。

提示：您还可以使用 VS Code 的运行/调试功能来运行程序。有关在 VS Code 中运行和调试 Node.js 应用程序的详细信息，请参阅 Node.js 教程。

步骤 4：审查构建问题

VS Code 任务系统还可以通过问题匹配器检测构建问题。问题匹配器根据特定的构建工具解析构建输出，并提供集成的错误显示和导航。VS Code 附带了许多问题匹配器，上面在 `tasks.json` 中看到的 `$tsc` 就是 TypeScript 编译器输出的问题匹配器。

例如，如果我们的 TypeScript 文件中有一个简单的错误（`console.log` 中多了一个 'g'），我们可能会从 `tsc` 得到以下输出：

HelloWorld.ts(3,17): error TS2339: Property 'logg' does not exist on type 'Console'.

这将在终端面板 (⌃` (Windows, Linux Ctrl+`)) 中显示，并在终端视图下拉菜单中选择 Tasks - build tsconfig.json。

您可以在状态栏中看到错误和警告计数。单击错误和警告图标以获取问题列表并导航到它们。

您也可以使用键盘打开列表 ⇧⌘M (Windows, Linux Ctrl+Shift+M)。

提示：任务为许多操作提供了丰富的支持。有关如何配置任务的更多信息，请查看任务主题。

JavaScript 源映射支持

TypeScript 调试支持 JavaScript 源映射。要为您的 TypeScript 文件生成源映射，请使用 `--sourcemap` 选项进行编译，或将 `tsconfig.json` 文件中的 `sourceMap` 属性设置为 `true`。

内联源映射（内容作为数据 URL 存储而不是单独文件的源映射）也受支持，但内联源代码尚不支持。

生成文件的输出位置

在大型项目中，将生成的 JavaScript 文件与 TypeScript 源文件放在同一文件夹中会很快变得杂乱。您可以使用 `outDir` 属性指定编译器的输出目录。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out"
  }
}

隐藏派生 JavaScript 文件

在使用 TypeScript 时，您通常不希望在文件资源管理器或搜索结果中看到生成的 JavaScript 文件。VS Code 提供了使用 `files.exclude` 工作区设置的筛选功能，您可以轻松创建表达式来隐藏这些派生文件：

**/*.js: { "when": "$(basename).ts" }

此模式将匹配任何 JavaScript 文件（`**/*.js`），但仅当存在同名的兄弟 TypeScript 文件时才匹配。如果 JavaScript 派生资源被编译到相同位置，文件资源管理器将不再显示它们。

在工作区的根目录下的 `.vscode` 文件夹中，将 `files.exclude` 设置与筛选器添加到工作区 `settings.json` 文件。您可以通过命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 中的 首选项: 打开工作区设置 (JSON) 命令打开工作区 `settings.json`。

要排除由 `.ts` 和 `.tsx` 源文件生成的 JavaScript 文件，请使用此表达式：

"files.exclude": {
    "**/*.js": { "when": "$(basename).ts" },
    "**/**.js": { "when": "$(basename).tsx" }
}

这有点技巧。glob 模式 用作键。上述设置使用两种不同的 glob 模式来提供两个唯一的键，但搜索仍将匹配相同的文件。

使用更新的 TypeScript 版本

VS Code 附带了最新稳定版本的 TypeScript 语言服务，并默认使用它来在您的工作区中提供 IntelliSense。工作区的 TypeScript 版本独立于您用于编译 `*.ts` 文件的 TypeScript 版本。在大多数常见情况下，您可以直接使用 VS Code 内置的 TypeScript 版本进行 IntelliSense 而无需担心，但有时您可能需要更改 VS Code 用于 IntelliSense 的 TypeScript 版本。

这样做的原因包括：

• 通过切换到 TypeScript 每夜版（`typescript@next`）来尝试最新的 TypeScript 功能。
• 确保您用于 IntelliSense 的 TypeScript 版本与用于编译代码的版本相同。

当您在查看 TypeScript 文件时，从语言状态栏固定版本号后，活动 TypeScript 版本及其安装位置可以显示在状态栏中：

如果您想更改工作区中 TypeScript 的默认版本，您有几个选项：

使用工作区版本的 TypeScript

如果您的工作区有特定的 TypeScript 版本，您可以通过打开 TypeScript 或 JavaScript 文件并单击状态栏中的 TypeScript 版本号，在工作区版本的 TypeScript 和 VS Code 默认使用的版本之间进行切换。将出现一个消息框，询问 VS Code 应该使用哪个 TypeScript 版本：

使用此功能在 VS Code 附带的 TypeScript 版本和工作区中的 TypeScript 版本之间切换。您也可以使用 TypeScript: 选择 TypeScript 版本 命令来触发 TypeScript 版本选择器。

VS Code 会自动检测安装在工作区根目录下 `node_modules` 中的工作区 TypeScript 版本。您还可以通过在用户或工作区设置中配置 `typescript.tsdk` 来明确告诉 VS Code 使用哪个 TypeScript 版本。`typescript.tsdk` 设置应指向包含 TypeScript `tsserver.js` 文件的目录。您可以使用 `npm list -g typescript` 找到 TypeScript 的安装位置。`tsserver.js` 文件通常位于 `lib` 文件夹中。

例如

{
  "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
}

提示：要获取特定的 TypeScript 版本，请在 npm install 期间指定 `@version`。例如，对于 TypeScript 3.6.0，您可以使用 `npm install --save-dev typescript@3.6.0`。要预览 TypeScript 的下一个版本，请运行 `npm install --save-dev typescript@next`。

请注意，尽管在这些示例中 `typescript.tsdk` 指向 `typescript` 内部的 `lib` 目录，但 `typescript` 目录必须是一个完整的 TypeScript 安装，包含 TypeScript 的 `package.json` 文件。

您还可以通过添加一个 `typescript.tsdk` 工作区设置来告诉 VS Code 在特定工作区中使用特定版本的 TypeScript，该设置指向 `tsserver.js` 文件所在的目录：

{
  "typescript.tsdk": "./node_modules/typescript/lib"
}

`typescript.tsdk` 工作区设置只告诉 VS Code 存在一个工作区版本的 TypeScript。要实际开始使用工作区版本进行 IntelliSense，您必须运行 TypeScript: 选择 TypeScript 版本 命令并选择工作区版本。

使用 TypeScript 每夜构建版本

在 VS Code 中尝试最新 TypeScript 功能的最简单方法是安装 JavaScript 和 TypeScript 每夜版扩展。

此扩展会自动将 VS Code 内置的 TypeScript 版本替换为最新的 TypeScript 每夜版。如果您已使用 TypeScript: 选择 TypeScript 版本 命令配置了 TypeScript 版本，请务必切换回使用 VS Code 的 TypeScript 版本。

混合 TypeScript 和 JavaScript 项目

可以混合使用 TypeScript 和 JavaScript 项目。要在 TypeScript 项目中启用 JavaScript，您可以在 `tsconfig.json` 中将 `allowJs` 属性设置为 `true`。

提示：`tsc` 编译器不会自动检测 `jsconfig.json` 文件的存在。使用 `–p` 参数让 `tsc` 使用您的 `jsconfig.json` 文件，例如 `tsc -p jsconfig.json`。

使用大型项目

如果您正在处理包含数百或数千个 TypeScript 文件的代码库，这里有一些可以采取的步骤，以改进 VS Code 中的编辑体验以及命令行上的编译时间。

确保您的 tsconfig 只包含您关心的文件

在项目的 `tsconfig.json` 中使用 `include` 或 `files` 来确保项目只包含应属于项目的文件。

有关配置项目 `tsconfig.json` 的更多信息。

使用项目引用拆分您的项目

您可以通过使用项目引用将源代码拆分为更小的项目，而不是将其结构化为一个大型项目，从而提高性能。这使得 TypeScript 可以在一次只加载代码库的一个子集，而不是加载整个代码库。

有关如何使用项目引用及其最佳实践的详细信息，请参阅TypeScript 文档。

后续步骤

继续阅读以了解：

• 编辑 TypeScript - TypeScript 的特定编辑功能。
• 重构 TypeScript - TypeScript 语言服务提供的有用重构。
• 调试 TypeScript - 为您的 TypeScript 项目配置调试器。

常见问题

如何解决 TypeScript “无法编译外部模块”错误？

如果您遇到该错误，请通过在项目根文件夹中创建 `tsconfig.json` 文件来解决。`tsconfig.json` 文件允许您控制 Visual Studio Code 如何编译您的 TypeScript 代码。有关更多信息，请参阅 tsconfig.json 概述。

为什么我在 VS Code 中得到的错误和警告与编译 TypeScript 项目时不同？

VS Code 附带了最新稳定版本的 TypeScript 语言服务，它可能与您计算机上全局安装或工作区本地安装的 TypeScript 版本不匹配。因此，您可能会看到编译器输出和活动 TypeScript 语言服务检测到的错误之间存在差异。有关安装匹配 TypeScript 版本的详细信息，请参阅使用更新的 TypeScript 版本。

我可以使用 VS 2022 附带的 TypeScript 版本吗？

不可以，Visual Studio 2019 和 2022 附带的 TypeScript 语言服务与 VS Code 不兼容。您需要从 npm 安装单独的 TypeScript 版本。

为什么有些错误被报告为警告？

默认情况下，VS Code TypeScript 将代码样式问题显示为警告而不是错误。这适用于：

• 变量已声明但从未使用
• 属性已声明但其值从不读取
• 检测到不可达代码
• 未使用的标签
• switch 语句中的穿透情况
• 并非所有代码路径都返回值

将这些视为警告与其他工具（如 TSLint）保持一致。当您从命令行运行 `tsc` 时，它们仍将显示为错误。

您可以通过在用户设置中将 `"typescript.reportStyleChecksAsWarnings": false` 设置来禁用此行为。