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 编译器将发出 “错误 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。启用源映射并重建你的项目。