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
让我们从一个简单的 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
IntelliSense 为您显示智能代码补全、悬停信息和签名帮助，以便您能够更快、更准确地编写代码。
VS Code 为单个 TypeScript 文件以及 TypeScript tsconfig.json 项目提供 IntelliSense。
悬停信息
将鼠标悬停在 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 提供了出色的调试支持，包括对源映射的支持。设置断点、检查对象、浏览调用堆栈并在调试控制台中执行代码。有关更多信息，请参阅 调试 TypeScript 和总体的 调试主题。
调试客户端
您可以使用浏览器调试器（例如 内置的 Edge 和 Chrome 调试器 或 Firefox 调试器）调试您的客户端代码。
调试服务器端
使用内置调试器在 VS Code 中调试 Node.js。设置非常简单，并且有一个 Node.js 调试教程 来帮助您。
代码风格检查器
代码整理器 提供对可疑代码的警告。虽然 VS Code 不包含内置的 TypeScript 代码整理器，但 TypeScript 代码整理器 扩展 可在 Marketplace 中获得。
ESLint 是一款流行的代码整理器，也支持 TypeScript。 ESLint 扩展 将 ESLint 集成到 VS Code 中，因此您可以在编辑器中看到代码整理错误，甚至可以使用 快速修复 快速修复其中的许多错误。 ESLint 插件指南 详细介绍了如何为您的 TypeScript 项目配置 ESLint。
TypeScript 扩展
VS Code 为 TypeScript 提供了许多开箱即用的功能。除了内置的功能之外，您还可以安装扩展以获得更强大的功能。
提示：单击上面的扩展磁贴以阅读描述和评论，以决定哪个扩展最适合您。在 Marketplace 中查看更多。
后续步骤
要了解更多信息，请参阅
- TypeScript 教程 - 在 VS Code 中创建一个简单的 Hello World TypeScript。
- 编辑 TypeScript - TypeScript 的特定编辑功能。
- 重构 TypeScript - 来自 TypeScript 语言服务的实用重构功能。
- 编译 TypeScript - 将 TypeScript 编译到 JavaScript 目标版本。
- 调试 TypeScript - 了解如何使用 VS Code 在服务器端和客户端调试 TypeScript。
常见问题
我可以在 VS 2022 中使用与 VS Code 附带的 TypeScript 版本相同的版本吗？
不能，与 Visual Studio 2019 和 2022 附带的 TypeScript 语言服务不兼容 VS Code。您需要从 npm 安装单独版本的 TypeScript。
如何在 VS Code 中使用最新的 TypeScript 测试版？
在 VS Code 中尝试最新的 TypeScript 功能的最简单方法是安装 JavaScript 和 TypeScript Nightly 扩展。