Visual Studio Code 中的 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

Hello World

让我们从一个简单的 Hello World Node.js 示例开始。创建一个新文件夹 HelloWorld 并启动 VS Code。

mkdir HelloWorld
cd HelloWorld
code .

在文件资源管理器中，创建一个名为 helloworld.ts 的新文件。

现在添加以下 TypeScript 代码。您会注意到 TypeScript 关键字 let 和 string 类型声明。

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

要编译您的 TypeScript 代码，您可以打开集成终端 (⌃` (Windows, Linux Ctrl+`)) 并输入 tsc helloworld.ts。这将编译并创建一个新的 helloworld.js JavaScript 文件。

如果您安装了 Node.js，您可以运行 node helloworld.js。

如果您打开 helloworld.js，您会发现它与 helloworld.ts 看上去没有太大区别。类型信息已被删除，let 现在是 var。

var message = 'Hello World';
console.log(message);

IntelliSense

在 VS Code 中，您可以看到获得了语法高亮和括号匹配等语言功能。当您在编辑器中键入时，您可能已经注意到 IntelliSense，这是由 VS Code 和 TypeScript 语言服务提供的智能代码补全和建议。您可以在下面看到 console 的方法

当您选择一个方法时，您将获得参数帮助，并且始终可以获得悬停信息。

tsconfig.json

到目前为止，在本教程中，您一直依赖 TypeScript 编译器的默认行为来编译您的 TypeScript 源代码。您可以通过添加 tsconfig.json 文件来修改 TypeScript 编译器选项，该文件定义了 TypeScript 项目设置，例如编译器选项以及应包含的文件。

重要：要在本教程的其余部分中使用 tsconfig.json，请在不带输入文件的情况下调用 tsc。TypeScript 编译器知道在您的 tsconfig.json 中查找项目设置和编译器选项。

添加一个简单的 tsconfig.json，将选项设置为编译为 ES5 并使用 CommonJS 模块。

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

编辑 tsconfig.json 时，IntelliSense (⌃Space (Windows, Linux Ctrl+Space)) 会为您提供帮助。

默认情况下，如果未包含 files 属性，TypeScript 会包含当前文件夹及其子文件夹中的所有 .ts 文件，因此我们不需要显式列出 helloworld.ts。

更改构建输出

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

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

删除 helloworld.js 并运行不带任何选项的命令 tsc。您将看到 helloworld.js 现在被放置在 out 目录中。

请参阅编译 TypeScript，了解 TypeScript 语言服务的其他功能以及如何使用任务直接在 VS Code 中运行构建。

错误检查

TypeScript 通过强大的类型检查帮助您避免常见的编程错误。例如，如果您将数字赋给 message，TypeScript 编译器将发出错误 'error TS2322: Type '2' is not assignable to type 'string'。您可以在 VS Code 中的编辑器（带有悬停信息的红色波浪线）和“问题”面板 (⇧⌘M (Windows, Linux Ctrl+Shift+M)) 中看到类型检查错误。前缀 [ts] 让您知道此错误来自 TypeScript 语言服务。

快速修复

TypeScript 语言服务拥有一套强大的诊断功能，用于查找常见的编码问题。例如，它可以分析您的源代码并检测不可访问的代码，这些代码在编辑器中会显示为灰色。如果您将鼠标悬停在源代码行上，您会看到解释性悬停提示；如果您将光标放在该行上，您会看到一个快速修复灯泡。

单击灯泡或按 ⌘. (Windows, Linux Ctrl+.) 会弹出“快速修复”菜单，您可以在其中选择移除不可访问代码修复。

此外，代码操作小组件：包含附近快速修复 (editor.codeActionWidget.includeNearbyQuickFixes) 是一项默认启用的设置，无论您的光标在该行的哪个位置，它都会从 ⌘. (Windows, Linux Ctrl+.)（命令 ID editor.action.quickFix）激活行中最接近的快速修复。

该命令会高亮显示将通过快速修复进行重构或修复的源代码。常规代码操作和非修复重构仍然可以在光标位置激活。

调试

VS Code 内置了对 TypeScript 调试的支持。为了支持将 TypeScript 与正在执行的 JavaScript 代码结合进行调试，VS Code 依赖于 源映射，以便调试器可以在原始 TypeScript 源代码和运行中的 JavaScript 之间进行映射。您可以在构建期间通过在 tsconfig.json 中设置 "sourceMap": true 来创建源映射。

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

通过运行 tsc 重新构建，您现在应该在 out 目录中看到一个位于 helloworld.js 旁边的 helloworld.js.map 文件。

在编辑器中打开 helloworld.ts 后，按 F5。如果您安装了其他调试器扩展，则需要从下拉列表中选择 Node.js。

调试器将启动一个会话，运行您的代码，并在“调试控制台”面板中显示“Hello World”消息。

在 helloworld.ts 中，通过单击编辑器左侧的边槽设置断点。如果设置了断点，您会看到一个红色圆圈。再次按 F5。当命中断点时，执行将停止，您可以在运行和调试视图 (⇧⌘D (Windows, Linux Ctrl+Shift+D)) 中查看调试信息，例如变量值和调用堆栈。

请参阅调试 TypeScript，详细了解 VS Code 内置的 TypeScript 调试支持以及如何为您的项目场景配置调试器。

下一步

本教程简要介绍了如何使用 VS Code 进行 TypeScript 开发。继续阅读以了解更多关于使用 VS Code 对 TypeScript 的编译和调试支持的信息

• 编译 TypeScript - 使用 VS Code 强大的任务系统编译 TypeScript。
• 编辑 TypeScript - TypeScript 的特定编辑功能。
• 重构 TypeScript - 来自 TypeScript 语言服务的有用重构。
• 调试 TypeScript - 为您的 TypeScript 项目配置调试器。

常见问题

无法启动程序，因为找不到对应的 JavaScript 文件

您可能未在 tsconfig.json 中设置 "sourceMap": true，并且 VS Code Node.js 调试器无法将您的 TypeScript 源代码映射到正在运行的 JavaScript。打开源映射并重新构建您的项目。