编辑 TypeScript

Visual Studio Code 对 TypeScript 提供了出色的编辑支持。本文将深入探讨 VS Code 内置的编辑和编程语言功能。如果您想了解更多关于 VS Code 中的通用编辑功能，例如键盘快捷键、多光标、搜索以及查找和替换，可以阅读基本编辑。

智能感知

智能感知会向您显示智能代码补全、悬停信息和签名帮助，以便您更快、更准确地编写代码。

VS Code 为单个 TypeScript 文件以及 TypeScript tsconfig.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。有三个可能的值

• none — 禁用参数内联提示。
• literals — 仅显示字面量（字符串、数字、布尔值）的内联提示。
• all — 显示所有参数的内联提示。

变量类型内联提示显示没有显式类型注释的变量的类型。

设置：typescript.inlayHints.variableTypes.enabled

属性类型内联提示显示没有显式类型注释的类属性的类型。

设置：typescript.inlayHints.propertyDeclarationTypes.enabled

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

设置：typescript.inlayHints.parameterTypes.enabled

返回类型内联提示显示没有显式类型注释的函数的返回类型。

设置：typescript.inlayHints.functionLikeReturnTypes.enabled

引用 CodeLens

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

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

点击引用计数可快速浏览引用列表。

实现 CodeLens

TypeScript 实现 CodeLens 会显示接口的实现者数量。

您可以通过将 "typescript.implementationsCodeLens.enabled" 设置为 true 来启用此功能。

与引用 CodeLens 类似，您可以点击实现计数以快速浏览所有实现的列表。

自动导入

自动导入通过帮助您查找可用符号并自动添加其导入来加快编码速度。

只需开始键入，即可查看当前项目中所有可用 TypeScript 符号的建议。

如果您从其他文件或模块中选择一个建议，VS Code 将自动为其添加导入。在此示例中，VS Code 会在文件顶部添加 Hercules 的导入。

您可以通过将 "typescript.suggest.autoImports" 设置为 false 来禁用自动导入。

粘贴时添加导入

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

此功能默认启用，但您可以通过切换typescript.updateImportsOnPaste.enabled设置来禁用它。

您可以通过配置editor.pasteAs.preferences设置，使带导入的粘贴成为默认行为，而无需显示粘贴控件。包含 text.updateImports.jsts 或 text.updateImports 可在粘贴时始终添加导入。

JSX 和自动关闭标签

VS Code 的 TypeScript 功能也支持 JSX。要在 TypeScript 中使用 JSX，请使用 *.tsx 文件扩展名而非普通的 *.ts。

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

将 "typescript.autoClosingTags" 设置为 false 以禁用 JSX 标签关闭。

JSDoc 支持

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

请记住，当在 TypeScript 代码中使用 JSDoc 时，不应包含类型注解。TypeScript 编译器只使用 TypeScript 类型注解，并忽略 JSDoc 中的注解。

要在 TypeScript 中禁用 JSDoc 注释建议，请将 "typescript.suggest.completeJSDocs" 设置为 false。

代码导航

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

语法高亮和语义高亮

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

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

语义高亮是否可见取决于当前的颜色主题。每个主题都可以配置是否显示语义高亮以及它如何样式化语义标记。

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

语义高亮可以根据以下因素更改颜色：

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

后续步骤

继续阅读以了解：

• 重构 TypeScript - 了解 TypeScript 可用的实用重构功能。
• 调试 TypeScript - 为您的 TypeScript 项目配置调试器。