在 VS Code 中尝试

编辑 TypeScript

Visual Studio Code 对 TypeScript 有很好的编辑支持。本文深入探讨了 VS Code 内置的编辑和编程语言功能。如果你想了解更多关于 VS Code 中的通用编辑功能,例如键盘快捷方式、多光标、搜索、查找和替换,你可以阅读基本编辑

智能感知

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

TypeScript small completions for String type

VS Code 为单个 TypeScript 文件以及 TypeScript tsconfig.json 项目提供智能感知。

悬停信息

将鼠标悬停在 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 来禁用自动导入。

粘贴时添加导入

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

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

你可以通过配置editor.pasteAs.preferences 设置,使粘贴时添加导入成为默认行为,而不显示粘贴控制。包含 text.updateImports.jststext.updateImports 可始终在粘贴时添加导入。

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 智能感知理解许多标准 JSDoc 注解,并使用它们在建议悬停信息签名帮助中显示类型信息和文档。

TypeScript language within VS Code

请记住,在为 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)或可修改的。
  • 变量/属性类型是否可调用(函数类型)。

下一步

继续阅读以了解: