现已发布！阅读 10 月份的新功能和修复。

编辑 TypeScript

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

IntelliSense

IntelliSense 为您提供智能代码补全、悬停信息和签名帮助，让您能够更快、更准确地编写代码。

TypeScript small completions for String type

VS Code 为单个 TypeScript 文件以及 TypeScript tsconfig.json 项目提供 IntelliSense。

悬停信息

将鼠标悬停在 TypeScript 符号上，可以快速查看其类型信息和相关文档

Hover for a lodash function

您也可以使用 ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) 键盘快捷键显示当前光标位置的悬停信息。

签名帮助

在您编写 TypeScript 函数调用时，VS Code 会显示有关函数签名的信息，并突出显示您当前正在完成的参数

Signature help for the lodash capitalize function

在函数调用中键入 ( 或 , 时，会自动显示签名帮助。使用 ⇧⌘Space (Windows, Linux Ctrl+Shift+Space) 手动触发签名帮助。

代码片段

VS Code 包含基本的 TypeScript 代码片段，这些代码片段会在您键入时进行建议；

Typescript snippets

您可以安装扩展来获取额外的代码片段，或为 TypeScript 定义自己的代码片段。有关更多信息，请参阅 用户定义的代码片段。

提示：您可以在 设置 文件中将 editor.snippetSuggestions 设置为 "none" 来禁用代码片段。如果您想查看代码片段，您可以指定相对于建议的顺序；在顶部 ("top")、底部 ("bottom") 或按字母顺序内联 ("inline")。默认值为 "inline"。

内联提示

内联提示在源代码中添加额外的内联信息，以帮助您理解代码的作用。

参数名称内联提示在函数调用中显示参数名称

Parameter name inlay hints

这可以帮助您一目了然地理解每个参数的含义，对于接受布尔标志或参数易于混淆的函数尤其有用。

要启用参数名称内联提示，请设置 typescript.inlayHints.parameterNames.enabled。共有三个可能的值

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

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

设置：typescript.inlayHints.variableTypes.enabled

Variable type inlay hints

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

设置：typescript.inlayHints.propertyDeclarationTypes.enabled

Property type inlay hints

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

设置：typescript.inlayHints.parameterTypes.enabled

Parameter type inlay hints

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

设置：typescript.inlayHints.functionLikeReturnTypes.enabled

Return type inlay hints

参考 CodeLens

TypeScript 参考 CodeLens 显示类、接口、方法、属性和导出对象的参考数量

TypeScript references CodeLens

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

单击参考数量可以快速浏览参考列表

TypeScript references CodeLens peek

实现 CodeLens

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

TypeScript implementations CodeLens

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

与参考 CodeLens 一样，您可以单击实现数量以快速浏览所有实现列表。

自动导入

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

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

Global symbols are shown in the suggestion list

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

After selecting a symbol from a different file, an import is added for it automatically

您可以在用户设置文件中设置 "typescript.suggest.autoImports": false 来禁用自动导入。

JSX 和自动关闭标签

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

IntelliSense in JSX

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

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

JSDoc 支持

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

TypeScript language within VS Code

请记住，在将 JSDoc 用于 TypeScript 代码时，您不应包含类型注释。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) 或可修改。
  • 变量/属性类型是否可调用（函数类型）或不可调用。

后续步骤

继续阅读以了解有关以下内容的信息：

10/29/2024