编译 TypeScript
TypeScript 是 JavaScript 的类型化超集，可以转换为纯 JavaScript。它提供类、模块和接口，帮助你构建健壮的组件。
安装 TypeScript 编译器
Visual Studio Code 包含 TypeScript 语言支持，但不包含 TypeScript 编译器 tsc。你需要全局或在你的工作区中安装 TypeScript 编译器，才能将 TypeScript 源代码转换为 JavaScript (tsc HelloWorld.ts)。
安装 TypeScript 最简单的方法是通过 npm，即 Node.js 包管理器。如果你已安装 npm，可以通过以下命令在你的计算机上全局 (-g) 安装 TypeScript：
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)) 将在你整个操作过程中提供帮助。
对于 ES5、CommonJS 模块 和源代码映射，一个简单的 tsconfig.json 如下所示：
{
"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+`)) 中显示，并选择终端视图下拉菜单中的 任务 - 构建 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 文件编译到同一个位置，则文件资源管理器将不再显示它们的派生资源。
在工作区 settings.json 文件中添加带有过滤器的 files.exclude 设置，该文件位于工作区根目录下的 .vscode 文件夹中。您可以通过命令面板 ( ⇧⌘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 nightly build (
typescript@next)。 - 确保您使用与用于编译代码的版本相同的 TypeScript 版本来获得 IntelliSense。
当查看 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 [email protected]。要预览下一个版本的 TypeScript，请运行npm install --save-dev typescript@next。
请注意，虽然 typescript.tsdk 指向这些示例中的 typescript 内部的 lib 目录，但 typescript 目录必须是包含 TypeScript package.json 文件的完整 TypeScript 安装。
您还可以通过添加一个指向 tsserver.js 文件目录的工作区设置 typescript.tsdk 来告诉 VS Code 在特定工作区中使用特定版本的 TypeScript
{
"typescript.tsdk": "./node_modules/typescript/lib"
}
typescript.tsdk 工作区设置仅告诉 VS Code 工作区版本的 TypeScript 存在。要真正开始使用工作区版本来获得 IntelliSense，您必须运行“TypeScript：选择 TypeScript 版本”命令，然后选择工作区版本。
使用 TypeScript nightly build
在 VS Code 中试用最新 TypeScript 功能的最简单方法是安装 JavaScript and TypeScript Nightly 扩展。
此扩展会自动将 VS Code 内置的 TypeScript 版本替换为最新的 TypeScript nightly build。只需确保您 切换回使用 VS Code 的 TypeScript 版本，如果您已使用“TypeScript：选择 TypeScript 版本”命令配置了 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 来确保项目只包含应该包含在项目中的文件。
使用项目引用来分解项目
您可以通过使用 项目引用 将源代码分解成更小的项目，而不是将源代码构建为一个大型项目，从而提高性能。这允许 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 中的 case 穿透
- 并非所有代码路径都返回值
将这些视为警告与其他工具（如 TSLint）一致。当您从命令行运行 tsc 时，这些仍然将显示为错误。
您可以通过在用户 设置 中设置 "typescript.reportStyleChecksAsWarnings": false 来禁用此行为。