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
另一种选择是在你的项目本地安装 TypeScript 编译器 (npm install --save-dev typescript)，这样做的好处是可以避免与你可能拥有的其他 TypeScript 项目发生潜在冲突。
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);
智能感知
智能感知为你提供了智能代码补全、悬停信息和签名帮助，以便你更快速、更准确地编写代码。
VS Code 为单个 TypeScript 文件和 TypeScript tsconfig.json 项目提供了智能感知。
悬停信息
悬停在 TypeScript 符号上，快速查看其类型信息和相关文档
你还可以使用键盘快捷方式 ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) 在当前光标位置显示悬停信息。
签名帮助
当你编写 TypeScript 函数调用时，VS Code 会显示关于函数签名的信息，并高亮显示你当前正在补全的参数。
当你在函数调用中键入 ( 或 , 时，签名帮助会自动显示。使用 ⇧⌘Space (Windows, Linux Ctrl+Shift+Space) 可以手动触发签名帮助。
代码片段
除了智能代码补全，VS Code 还包含基本的 TypeScript 代码片段，这些代码片段会在你键入时建议显示。
你可以安装扩展来获取更多代码片段，或为 TypeScript 定义自己的代码片段。详见用户定义的代码片段。
提示：你可以在设置文件中通过将 editor.snippetSuggestions 设置为
"none"来禁用代码片段。如果你想看到代码片段，可以指定相对于建议的顺序；在顶部 ("top")、在底部 ("bottom") 或按字母顺序内联显示 ("inline")。默认值为"inline"。
错误和警告
TypeScript 语言服务会分析你的程序中的编码问题，并报告错误和警告
- 在状态栏中，会显示所有错误和警告的总数。
- 你可以点击总数或按 ⇧⌘M (Windows, Linux Ctrl+Shift+M) 显示问题面板，其中包含所有当前错误的列表。
- 如果你打开一个包含错误或警告的文件，它们将与文本内联显示，并在概览尺中呈现。
若要遍历当前文件中的错误或警告，你可以按 F8 或 ⇧F8 (Windows, Linux Shift+F8)，这将显示一个内联区域，其中详细说明了问题以及可能的代码操作（如果可用）。
代码导航
代码导航使你能够快速导航 TypeScript 项目。
- 转到定义 F12 - 转到符号定义的源代码。
- 查看定义 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - 弹出一个查看窗口，显示符号的定义。
- 转到引用 ⇧F12 (Windows, Linux Shift+F12) - 显示对符号的所有引用。
- 转到类型定义 - 转到定义符号的类型。对于类的实例，这将显示类本身，而不是定义实例的位置。
- 转到实现 ⌘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 格式化程序，它提供具有合理默认设置的基本代码格式化。
使用 typescript.format.* 设置来配置内置的格式化程序，例如让大括号显示在自己的行上。或者，如果内置格式化程序妨碍了你，请将 "typescript.format.enable" 设置为 false 以将其禁用。
对于更特殊的代码格式化样式，请尝试从 VS Code Marketplace 安装其中一个格式化扩展。
重构
VS Code 包含一些实用的 TypeScript 重构功能，例如提取函数和提取常量。只需选择要提取的源代码，然后单击编辑器边栏中的灯泡图标或按 (⌘. (Windows, Linux Ctrl+.)) 查看可用的重构操作。
详见重构 TypeScript，了解有关重构的更多信息以及如何为单个重构配置键盘快捷方式。
重命名
最简单的重构之一是重命名方法或变量。按 F2 可重命名光标下的符号，并在整个 TypeScript 项目中应用更改。
调试
VS Code 对 TypeScript 提供了强大的调试支持，包括对 sourcemap 的支持。你可以在调试控制台中设置断点、检查对象、导航调用堆栈和执行代码。详见调试 TypeScript 和调试总主题以了解更多信息。
调试客户端
你可以使用浏览器调试器调试客户端代码，例如内置的 Edge 和 Chrome 调试器，或 适用于 Firefox 的调试器。
调试服务端
在 VS Code 中使用内置调试器调试 Node.js。设置非常简单，并且提供了一个Node.js 调试教程来帮助你。
Linters
Linters 为可疑代码提供警告。虽然 VS Code 不包含内置的 TypeScript linter，但 Marketplace 中提供了 TypeScript linter 扩展。
ESLint 是一个流行的 linter，它也支持 TypeScript。 ESLint 扩展将 ESLint 集成到 VS Code 中，这样你就可以直接在编辑器中看到 linting 错误，甚至使用 快速修复 快速修复其中的许多错误。 ESLint 插件指南 详细介绍了如何为你的 TypeScript 项目配置 ESLint。
TypeScript 扩展
VS Code 为 TypeScript 开箱即用地提供了许多功能。除了内置功能外，你还可以安装扩展以获得更多功能。
提示：单击上方的扩展磁贴以阅读描述和评论，决定哪个扩展最适合你。在市场中查看更多。
后续步骤
欲了解更多信息，请参阅
- TypeScript 教程 - 在 VS Code 中创建一个简单的 Hello World TypeScript。
- 编辑 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 beta 版本？
在 VS Code 中尝试最新 TypeScript 功能的最简单方法是安装 JavaScript 和 TypeScript 每夜版扩展。