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 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);
智能感知
在 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: 类型 '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 依赖于 source maps，以便调试器能够在原始 TypeScript 源代码和运行的 JavaScript 之间进行映射。您可以在构建过程中通过在 tsconfig.json 中设置 "sourceMap": true 来创建 source maps。
{
"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。
- Editing TypeScript - TypeScript 的特定编辑功能。
- Refactoring TypeScript - TypeScript语言服务中的有用重构。
- 调试 TypeScript - 为您的 TypeScript 项目配置调试器。
常见问题
无法启动程序，因为找不到相应的JavaScript
您可能没有在tsconfig.json中设置"sourceMap": true，因此VS Code Node.js调试器无法将您的TypeScript源代码映射到运行的JavaScript。请启用源映射并重新构建您的项目。