TypeScript 在 Visual Studio Code 中
TypeScript 是一个带有类型检查的 JavaScript 超集，编译成普通的 JavaScript。它提供了类、模块和接口，帮助你构建强大的组件。
安装TypeScript编译器
Visual Studio Code 包含 TypeScript 语言支持，但不包含 TypeScript 编译器。翻译结果：tsc您需要全局或在工作区中安装TypeScript编译器，以将TypeScript源代码编译为JavaScripttsc HelloWorld.ts)。
安装TypeScript的最简单方法是通过npm，即Node.js包管理器。如果你已经安装了npm，你可以全局安装TypeScript（输入：-g) 在您的计算机上通过：
npm install -g typescript
您可以通过检查版本来测试您的安装。
tsc --版本
另一个选项是将TypeScript编译器安装在项目中npm install --save-dev typescript) 并且避免与其他可能存在的 TypeScript 项目发生潜在的冲突。
Hello World
让我们从一个简单的 Hello World Node.js 示例开始。创建一个新文件夹Hello World并启动 VS Code。
创建目录 HelloWorld
切换目录 HelloWorld
代码 .
从文件资源管理器中，创建一个名为的新文件helloworld.ts输入：.
现在添加以下TypeScript代码。你会注意到TypeScript关键字让和字符串类型声明。
让 消息：字符串 = 'Hello World';
控制台.日志(消息);
要编译你的TypeScript代码，你可以打开集成终端 (⌃` (Windows, Linux Ctrl+`)) 并输入tsc helloworld.ts这将编译并创建一个新的helloworld.jsJavaScript 文件。
如果你已经安装了Node.js，你可以运行节点 helloworld.js输入：.
如果你打开helloworld.js你将会看到它看起来与...并没有什么不同。helloworld.ts类型信息已被移除，并且让现在是变量输入：.
变量 消息 = 'Hello World';
控制台.日志(消息);
智能感知
IntelliSense 会为您提供智能代码完成、悬停信息和签名帮助，使您可以更快速、更准确地编写代码。
VS Code 为单独的 TypeScript 文件以及 TypeScript 提供了 IntelliSensetsconfig.json项目。
悬停信息
将鼠标悬停在 TypeScript 符号上，即可快速查看其类型信息和相关文档：
你也可以通过 ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) 键盘快捷键在当前光标位置显示悬停信息。
签名帮助
当您编写 TypeScript 函数调用时，VS Code 会显示有关函数签名的信息，并突出显示您当前正在完成的参数：
签名帮助在您输入时会自动显示输入：(或输入： 在函数调用中。使用 ⇧⌘Space (Windows, Linux Ctrl+Shift+Space) 手动触发签名帮助。
片段
除了智能代码补全，VS Code 还包括基本的 TypeScript代码片段，这些代码片段会在你输入时建议。
您可以安装扩展以获取额外的片段或为 TypeScript 定义自己的片段。请参阅用户定义片段了解更多信息。
提示：您可以通过设置禁用片段
编辑器.片段建议至"无"在你的 设置 文件中。如果你想查看片段，你可以指定相对于建议的顺序；在顶部 ("顶部"), 在底部 ("底部"), 或者内联按字母顺序排列 ("内联"默认值是"内联"输入：.
错误和警告
TypeScript语言服务将分析您的程序以查找编码问题，并报告错误和警告：
- 在状态栏中，有一个所有错误和警告的计数摘要。
- 您可以点击摘要或按⇧⌘M（Windows, LinuxCtrl+Shift+M）以显示PROBLEMS面板，其中列出了所有当前错误。
- 如果你打开一个有错误或警告的文件，它们将与文本一起在线内显示，并出现在概览标尺上。
要循环遍历当前文件中的错误或警告，您可以按F8或⇧F8（Windows, LinuxShift+F8），这将显示一个内联区域，详细说明问题和可能的代码操作（如果可用）：
代码导航
代码导航可以让你快速导航TypeScript项目。
- 转到定义 F12 - 转到符号定义的源代码。
- 查看定义 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - 弹出一个显示符号定义的PeekWindows。
- 转到引用 ⇧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"至假禁用它。
对于更专业的代码格式化风格，请尝试从 VS Code 市场上安装一个格式化扩展。
重构
VS Code 包含一些对 TypeScript 有用的代码重构功能，例如 提取函数 和 提取常量。只需选择您要提取的源代码，然后点击 gutter 中的灯泡或按 (⌘. (Windows, Linux Ctrl+.)) 查看可用的代码重构功能。
参见Refactoring TypeScript 以获取有关重构和如何为各个重构配置键盘快捷键的更多信息。
重命名
最简单的代码重构之一是重命名一个方法或变量。按F2以在您的 TypeScript 项目中重命名光标下的符号：
调试
VS Code 对 TypeScript 提供了出色的调试支持，包括对 source maps 的支持。设置断点、检查对象、导航调用堆栈，并在调试控制台中执行代码。请参阅调试 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 的内置功能。除了内置的功能，您还可以安装扩展以获得更多的功能。
提示：点击上方的扩展组件以阅读描述和评论，以决定哪个扩展最适合您。查看更多信息在市场。
下一步
要了解更多信息，请参见：
- 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 和 TypeScript 夜ly 版扩展.