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
另一个选择是在你的项目中本地安装 TypeScript 编译器（npm install --save-dev typescript），这样做的好处是可以避免与你可能拥有的其他 TypeScript 项目产生潜在冲突。
Hello World
让我们从一个简单的 Node.js Hello World 示例开始。创建一个新文件夹 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
IntelliSense（智能感知）为你提供智能代码补全、悬停信息和签名帮助，让你能更快速、更正确地编写代码。
VS Code 为独立的 TypeScript 文件以及基于 tsconfig.json 的 TypeScript 项目提供了 IntelliSense 支持。
悬停信息
将鼠标悬停在 TypeScript 符号上，即可快速查看其类型信息和相关文档。
你也可以通过键盘快捷键 ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) 在当前光标位置显示悬停信息。
签名帮助
当你编写 TypeScript 函数调用时，VS Code 会显示有关函数签名的信息，并高亮显示你当前正在填写的参数。
当你在函数调用中输入 ( 或 , 时，签名帮助会自动显示。使用 ⇧⌘Space (Windows, Linux Ctrl+Shift+Space) 可手动触发签名帮助。
代码片段
除了智能代码补全外，VS Code 还包含基础的 TypeScript 代码片段 (snippets)，它们会在你输入时进行建议。
你可以安装扩展来获取额外的代码片段，或者定义你自己的 TypeScript 代码片段。更多信息请参阅用户自定义代码片段。
提示：你可以通过在设置文件中将 editor.snippetSuggestions 设置为
"none"来禁用代码片段。如果你希望显示片段，可以指定其相对于补全建议的顺序：顶部 ("top")、底部 ("bottom") 或按字母顺序排序并嵌入其中 ("inline")。默认为"inline"。
错误和警告
TypeScript 语言服务会分析你的程序中的编码问题，并报告错误和警告。
- 在状态栏中，有所有错误和警告计数的汇总。
- 你可以点击该汇总，或按 ⇧⌘M (Windows, Linux Ctrl+Shift+M) 来显示包含所有当前错误列表的“问题” (PROBLEMS) 面板。
- 如果你打开一个有错误或警告的文件，它们将会在文本内以及概览标尺中显示。
要在当前文件中循环查看错误或警告，你可以按 F8 或 ⇧F8 (Windows, Linux Shift+F8)，这将显示一个内联区域，详细说明问题及可能的“代码操作” (Code Actions，如果可用)。
代码导航
代码导航功能可以让你快速浏览 TypeScript 项目。
- 转到定义 F12 - 转到符号定义的源代码。
- 速览定义 ⌥F12 (Windows 为 Alt+F12，Linux 为 Ctrl+Shift+F10) - 弹出一个速览窗口，显示符号的定义。
- 转到引用 ⇧F12 (Windows、Linux 为 Shift+F12) - 显示符号的所有引用。
- 转到类型定义 - 转到定义符号的类型。对于类的实例，这将显示类本身，而不是实例的定义位置。
- 转到实现 (Go to Implementation) ⌘F12 (Windows, Linux Ctrl+F12) - 跳转到接口或抽象方法的实现处。
您可以通过命令面板 (⇧⌘P (Windows、Linux 为 Ctrl+Shift+P)) 中的转到符号命令来进行符号搜索导航。
- 转到文件中的符号 ⇧⌘O (Windows、Linux 为 Ctrl+Shift+O)
- 转到工作区中的符号 ⌘T (Windows、Linux 为 Ctrl+T)
格式化
VS Code 包含一个 TypeScript 格式化程序，提供具有合理默认值的基本代码格式化。
使用 js/ts.format.* 设置来配置内置格式化程序，例如让大括号出现在独立的一行上。或者，如果内置格式化程序造成了干扰，可以将 "js/ts.format.enable" 设置为 false 来禁用它。
如需更专业的代码格式化样式，请尝试从 VS Code 市场安装格式化扩展。
重构
VS Code 为 TypeScript 包含了一些实用的重构功能，例如提取函数和提取常量。只需选中你想要提取的源代码，然后点击边栏中的灯泡图标，或按 (⌘. (Windows, Linux Ctrl+.)) 查看可用的重构选项。
有关重构以及如何为各个重构操作配置键盘快捷键的更多信息，请参阅重构 TypeScript。
重命名
最简单的重构之一是重命名方法或变量。按 F2 即可在整个 TypeScript 项目中重命名光标下的符号。
调试
VS Code 为 TypeScript 提供了强大的调试支持，包括对源映射 (sourcemaps) 的支持。你可以设置断点、检查对象、遍历调用堆栈，并在调试控制台中执行代码。请参阅调试 TypeScript 和总体的调试主题了解更多信息。
调试客户端
你可以使用浏览器调试器（如内置的 Edge 和 Chrome 调试器）或 Debugger for Firefox 来调试你的客户端代码。
调试服务器端
使用内置调试器在 VS Code 中调试 Node.js。设置很简单，并且有一个Node.js 调试教程可以帮助您。
Linters
Lint 工具可以针对可疑代码提供警告。虽然 VS Code 没有内置 TypeScript Lint 工具，但你可以在市场中找到 TypeScript Lint 扩展。
ESLint 是一款流行的 Lint 工具，同时也支持 TypeScript。ESLint 扩展将 ESLint 集成到 VS Code 中，这样你就能直接在编辑器中看到 Lint 错误，甚至通过快速修复 (Quick Fixes) 快速修复许多错误。ESLint 插件指南详细介绍了如何为你的 TypeScript 项目配置 ESLint。
TypeScript 扩展
VS Code 开箱即为 TypeScript 提供了许多功能。除了内置功能外，你还可以安装扩展以获得更强大的功能。
提示：点击上方的扩展卡片以阅读其描述和评价，从而决定哪款扩展最适合你。在市场中查看更多信息。
后续步骤
要了解更多信息，请参阅：
- TypeScript 教程 - 在 VS Code 中创建简单的 TypeScript Hello World 程序。
- 编辑 TypeScript - TypeScript 的特定编辑功能。
- 重构 TypeScript - TypeScript 语言服务提供的有用重构。
- 转译 TypeScript - 将 TypeScript 编译为目标 JavaScript 版本。
- 调试 TypeScript - 了解如何在 VS Code 中调试服务端和客户端 TypeScript 代码。
常见问题
我可以使用随 VS 2022 一起提供的 TypeScript 版本吗？
不可以，随 Visual Studio 2019 和 2022 一起提供的 TypeScript 语言服务与 VS Code 不兼容。你需要从 npm 单独安装一个 TypeScript 版本。
我如何在 VS Code 中使用最新的 TypeScript 测试版？
在 VS Code 中尝试最新 TypeScript 功能的最简单方法是安装 JavaScript and TypeScript Nightly 扩展。