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 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 为单个 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 snippets，这些片段会在您输入时建议。
您可以安装扩展以获取额外的代码片段或为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市场安装一个格式化扩展。
重构
VS Code 包含一些方便的 TypeScript 重构功能，例如 提取函数 和 提取常量。只需选择你想要提取的源代码，然后点击边栏中的灯泡或按下 (⌘. (Windows, Linux Ctrl+.)) 即可查看可用的重构选项。
有关重构以及如何为单个重构配置键盘快捷键的更多信息，请参见重构TypeScript。
重命名
最简单的重构之一就是重命名方法或变量。按下 F2 可以在你的 TypeScript 项目中重命名光标下的符号：
调试
VS Code 提供了对 TypeScript 的强大调试支持，包括对源映射的支持。设置断点、检查对象、导航调用堆栈，并在调试控制台中执行代码。请参阅 调试 TypeScript 和整体的 调试主题 以了解更多信息。
调试客户端
您可以使用浏览器调试器调试您的客户端代码，例如内置的Edge和Chrome调试器，或者Firefox调试器。
调试服务器端
在VS Code中使用内置调试器调试Node.js。设置简单，并且有一个Node.js调试教程可以帮助你。
代码检查工具
Linters 提供对可疑代码的警告。虽然 VS Code 不包含内置的 TypeScript linter，但可以在市场中找到 TypeScript linter 扩展。
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附带的TypeScript版本吗？
不，Visual Studio 2019 和 2022 附带的 TypeScript 语言服务与 VS Code 不兼容。您需要从 npm 安装一个单独的 TypeScript 版本。
如何在VS Code中使用最新的TypeScript测试版？
在VS Code中尝试最新的TypeScript功能的最简单方法是安装JavaScript and TypeScript Nightly extension。