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 message: string = 'Hello World';
console.log(message);
要编译你的 TypeScript 代码，你可以打开集成终端（⌃'（Windows，Linux Ctrl+'））并输入TSC的 helloworld.ts. 这会编译并创建新的helloworld.jsJavaScript文件。
如果你安装了Node.js，就可以运行了节点 helloworld.js.
如果你开门helloworld.js你会发现它看起来和实际情况差别不大helloworld.ts. 类型信息已被删除，且设现在是VAR.
var message = 'Hello World';
console.log(message);
IntelliSense
IntelliSense 会为你展示智能代码补全、悬停信息和签名帮助，让你能更快更准确地编写代码。
VS Code 为单个 TypeScript 文件以及 TypeScript 提供 IntelliSensetsconfig.json项目。
悬停信息
将鼠标悬停在 TypeScript 符号上，可快速查看其类型信息和相关文档：
你也可以用 ⌘K ⌘I（Windows，Linux Ctrl+K Ctrl+I）快捷键显示当前光标位置的悬停信息。
签名帮助
当你编写 TypeScript 函数调用时，VS Code 会显示函数签名的信息，并突出显示你当前正在执行的参数：
当你输入 a 或 时，签名帮助会自动显示(,在函数调用中。使用⇧⌘Space（Windows，Linux Ctrl+Shift+Space）手动触发签名帮助。
片段
除了智能代码补全，VS Code 还包含基本的 TypeScript 片段，在你输入时会被推荐。
你可以安装扩展以获取额外的摘要，或者为TypeScript自定义自己的摘要。更多信息请参见用户自定义摘要。
提示：你可以通过设置禁用片段
editor.snippet建议到“没有”在你的设置文件里。如果你想看到片段，可以指定相对于建议的顺序;在顶部 （“顶”），在底部（“底层”），或按字母顺序排列（“内线”). 默认为“内线”.
错误与警告
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）——前往接口或抽象方法的实现。
你可以通过命令面板中的“去到符号”命令（Windows，Linux Ctrl+Shift+P）中的“去到符号”命令进行导航。
- 进入文件中的符号 ⇧⌘O（Windows，Linux Ctrl+Shift+O）
- 在工作区 ⌘T 中切换到符号（Windows，Linux Ctrl+T）
格式
VS Code 包含一个 TypeScript 格式化器，提供基本的代码格式和合理的默认值。
使用该Typescript.format.* 设置以配置内置格式化器，例如让大括号出现在单独的行上。或者，如果内置格式化器妨碍了作，则设置“typescript.format.enable”到错误用来关闭它。
如果想要更专业的代码格式样式，可以试试安装VS Code市场的格式扩展。
重构
VS Code 包含一些实用的 TypeScript 重构功能，比如 Extract 函数和 Extract 常数。只需选择你想提取的源代码，然后点击 Gutter 中的灯泡，或者按 （⌘.（Windows，Linux Ctrl+.））查看可用的重构。
有关重构以及如何配置键盘快捷键以实现各个重构的更多信息，请参见重构TypeScript。
更名
最简单的重构之一是重命名方法或变量。按F2可重命名TypeScript项目中光标下方的符号：
调试
VS Code 对 TypeScript 提供了出色的调试支持，包括对源码映射的支持。设置断点、检查对象、导航调用栈，并在调试控制台中执行代码。请参见调试 TypeScript 及整体调试主题。
调试客户端
您可以使用浏览器调试器，如内置的 Edge 和 Chrome 调试器，或 Firefox 的调试器，来调试客户端代码。
调试服务器端
用内置调试器在 VS Code 中调试Node.js。设置简单，还有Node.js调试教程可以帮你。
林特
Linter 会对可疑代码提供警告。虽然 VS Code 不内置 TypeScript linter，但 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。你需要安装一个独立版本的TypeScript，而不是npm。
我如何将最新的TypeScript测试版与VS Code一起使用？
尝试 VS Code 最新 TypeScript 功能最简单的方法是安装 JavaScript 和 TypeScript Nightly 扩展。