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)）将沿途为您提供帮助。
默认情况下，如果未包含 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 编译器将报告错误 **“错误 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 重新构建，您现在应该在 helloworld.js 旁边在 out 目录中有一个 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。开启源映射并重新构建项目。