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，则可以通过以下命令在您的计算机上全局 (-g) 安装 TypeScript
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)) 会在您一路前进。
默认情况下，TypeScript 包含当前文件夹和子文件夹中的所有 .ts 文件（如果未包含 files 属性），因此我们不需要显式地列出 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 编译器将抱怨 “错误 TS2322：类型“2”无法分配给类型“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。打开源代码映射并重建您的项目。