编辑 TypeScript

Visual Studio Code 对 TypeScript 有很好的编辑支持。本文深入介绍了 VS Code 内置的编辑和编程语言功能。如果你想了解更多关于 VS Code 一般编辑功能的信息，例如键盘快捷键、多光标、搜索以及查找和替换，你可以阅读 基本编辑。

智能感知

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.inlayHints.parameterNames.enabled. 有三种可能的值：

• 无— 禁用参数内嵌提示。
• 文字— 仅在文字（字符串、数字、布尔值）上显示内联提示。
• 全部— 显示所有参数的内联提示。

变量类型嵌入提示显示没有明确类型注解的变量类型。

设置:typescript.inlayHints.variableTypes.enabled

属性类型嵌入提示 显示没有明确类型注释的类属性的类型。

设置:typescript.inlayHints.propertyDeclarationTypes.enabled

参数类型提示 显示隐式类型参数的类型。

设置:typescript.inlayHints.parameterTypes.enabled

返回类型嵌入提示显示没有明确类型注释函数的返回类型。

设置:typescript.inlayHints.functionLikeReturnTypes.enabled

参考文献 CodeLens

TypeScript 参考 CodeLens 显示类、接口、方法、属性和导出对象的内联引用计数：

您可以通过设置启用此功能"typescript.referencesCodeLens.enabled": true在用户设置文件中。

点击参考计数以快速浏览参考列表：

实现代码代码查看器

TypeScript 实现中的 CodeLens 显示接口的实现者的数量：

您可以通过设置启用此功能"typescript.implementationsCodeLens.enabled": true输入：.

就像参考CodeLens一样，你可以点击实现计数来快速浏览所有实现的列表。

汽车进口

自动导入通过帮助你找到可用的符号并自动为它们添加导入来加快编码速度。

只需开始输入即可看到建议，这些是您当前项目中可用的 TypeScript 符号。

如果你从另一个文件或模块中选择一个建议，VS Code 会自动为其添加一个导入。在这个例子中，VS Code 为赫拉克勒斯到文件顶部:

您可以通过设置禁用自动导入"typescript.suggest.autoImports": false输入：.

粘贴时添加导入

当你在编辑器之间复制和粘贴代码时，VS Code 可以在粘贴代码时自动添加导入。当你粘贴包含未定义符号的代码时，会显示一个粘贴控制对话框，允许你选择以纯文本粘贴或添加导入。

此功能默认启用，但您可以切换该选项来禁用它。

你可以通过配置来实现默认行为，即在不显示粘贴控制的情况下进行粘贴导入。

JSX 和自动闭合标签

VS Code 的 TypeScript 功能也适用于 JSX。要在你的 TypeScript 中使用 JSX，请使用 *.tsx文件扩展名而不是正常的*.ts输入：

VS Code 还包括 JSX 特定的功能，例如在 TypeScript 中自动关闭 JSX 标签：

设置"typescript.autoClosingTags"至假的禁用 JSX 标签闭合。

JSDoc 支持

VS Code 的 TypeScript 代码感知理解许多标准 JSDoc 注释，并使用它们在 建议、悬停信息 和 签名帮助 中显示类型信息和文档。

请记住，当使用JSDoc对TypeScript代码进行注释时，你不应包含类型注释。TypeScript编译器只使用TypeScript类型注释，并忽略来自JSDoc的注释。

要禁用 TypeScript 中的 JSDoc 注释建议，请设置"typescript.suggest.completeJSDocs": false输入：.

代码导航

代码导航可以让你快速导航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 市场上安装一个格式化扩展。

语法高亮和语义高亮

除了语法高亮，TypeScript 和 JavaScript 还提供了语义高亮。

语法高亮根据词法规则对文本进行着色。语义高亮基于语言服务解析的符号信息丰富语法着色。

语义突出显示是否可见取决于当前的主题。每个主题可以配置是否显示语义突出显示以及如何样式化语义标记。

如果启用了语义突出显示，并且颜色主题定义了相应的样式规则，则可以看到不同的颜色和样式。

语义突出显示可以根据以下内容更改颜色：

• 符号的解析类型：命名空间，变量，属性，变量，类，接口，类型参数。
• 变量/属性是否为只读（const）或可修改。
• 变量/属性类型是否可调用（函数类型）或不可调用。

下一步

继续阅读，了解：

• 重构 TypeScript - 了解可用于 TypeScript 的有用重构。
• 调试 TypeScript - 配置你的 TypeScript 项目的调试器。