第一次使用 IDE 编程
感觉
就像是超能力。
没有流行的编程语言是完整的，如果没有语法高亮和其他IDE功能帮助进行开发的话。TypeScript 最大的优势之一是它的语言服务提供了一套强大的开发辅助工具，可以用于 JavaScript 和 TypeScript 代码。本章将介绍一些最有用的功能。
我强烈建议你在本书中构建的 TypeScript 项目中尝试这些 IDE 功能。尽管本章中的所有示例和截图都是我最喜欢的编辑器 VS Code，但任何具有 TypeScript 支持的 IDE 都将支持本章中的大部分或全部功能。截至 2022 年，这至少包括Atom、Emacs、Vim、Visual Studio 和WebStorm 等 所有 IDE。
本章是一些更常用的 TypeScript IDE 功能的非详尽列表，以及 VS Code 中它们的任何默认快捷方式。当你继续编写 TypeScript 代码时，你可能会发现更多。
许多 IDE 功能通常在通过右键单击代码中的名称后出现的上下文菜单中可用。VS Code 等 IDE 通常也会在上下文菜单中显示键盘快捷键。熟悉 IDE 的键盘快捷键可以帮助你更快地编写代码和执行重构。
此截图显示了 TypeScript 变量的 VS Code 中命令及其快捷键的列表（图 12-1）。
图 12-1。右键单击 VS Code 上下文菜单中显示变量的命令列表
在 VS Code 中，与大多数应用程序一样，向上和向下箭头选择下拉选项，Enter 激活选项。
导航代码
开发者通常花费更多的时间阅读代码而不是主动编写代码。协助导航代码的工具对于加快速度非常有用。TypeScript 语言服务提供的许多功能都为了解代码而设计的：特别是在代码中的类型定义或值以及使用它们的位置之间跳转。
现在，我将介绍上下文菜单中常用的导航选项及其 VS Code 快捷方式。
查找定义
TypeScript 可以从对类型定义或值的引用开始，并将你导航回其在代码中的原始位置。VS Code 还提供了几种以这种方式回溯的方法：
- 转到定义 （F12） 直接导航到原始定义请求名称的位置。
- Cmd （Mac）/ Ctrl （Windows） + 单击名称也会触发定义。
- 快速查看 > （Mac）/Alt （Windows） + F12） 会显示一个显示定义的快速查看出框。
转到类型定义是转到定义的专用版本，它转到值是什么类型的定义。对于类或接口的实例，它将显示类或接口本身，而不是定义实例的位置。
这些截图显示了使用“转到定义”查找导入到文件中的 data 变量的定义（图 12-2）。
图 12-2。左：转到变量名称的定义；右：结果打开的 data.ts 文件
当定义在你自己的代码中时，比如相对路径的文件，编辑器会跳转到那个文件。代码之外的模块，如 npm 包，通常会使用 .d.ts 声明文件。
查找引用
给定类型定义或值，TypeScript 可以显示对它的所有引用的列表，或者在项目中使用它的位置。VS Code 提供了几种可视化该列表的方法。
“转到引用”（Shift + F12）可以显示引用那个类型定义或值的列表，其中包括它本身，在右键点击的名称下方以可展开的快速查看弹框的形式展示。
例如，这是一个 “转到引用” 的例子，展示了一个 data 变量在一个名为 data.ts 的文件中声明以及在另一个文件 index.ts 中使用的情况（如图 12-3 所示）。
图 12-3。显示对变量引用的快速查看菜单
该“快速查看”弹框包含引用文件的文件视图。你可以使用该文件（键入、运行编辑器命令等），就像它是常规打开的文件一样。还可以双击“快速查看”弹框的文件视图以打开该文件。
单击“快速查看”框右侧的文件名列表会将“快速查看”框的文件视图切换到单击的文件。双击列表中的文件行将打开该文件并选择其匹配的引用。
在这里，VS Code 显示了相同的 data 变量的声明和用法，但在右侧的侧边栏视图中进行了扩展（图 12-4）。
图 12-4。显示对变量的打开引用的快速查看菜单
查找所有引用（选项 （Mac）/Alt （Windows） + Shift + F12） 还显示引用列表，但在代码导航后保持可见的侧边栏视图中。这对于一次打开多个引用或执行操作非常有用（图 12-5）。
图 12-5。变量的“查找所有引用”菜单
查找实现
转到实现（Cmd （Mac）/Ctrl（Windows）+ F12）和查找所有 Mentations 是针对面间和抽象类方法的“转到/查找所有引用”的专用版本。它们在代码中找到接口或抽象方法的所有实现（图 12-6）。
图 12-6。查找 AI 接口的所有实现菜单
当你专门搜索如何使用类型（如类或接口）键入的值时，这些特别有用。查找所有引用可能太嘈杂，因为它还会显示类或接口的定义和其他类型的引用。
编写代码
IDE 的语言服务，例如 VS Code 的 TypeScript 服务在编辑器的后台运行，并对文件中执行的操作做出反应。它们可以在你输入内容时看到对文件的编辑——甚至在更改被保存到文件之前。这样做可以实现一系列功能，以帮助自动化编写TypeScript代码时的常见任务。
完自动成名称
TypeScript 的 API 也可以被编辑器用来补全同一文件中存在的名称。当你开始键入名称时，例如在提供先前声明的变量作为函数参数时，使用 TypeScript 的编辑器通常提供自动完成建议并列出与名称匹配的变量列表。使用鼠标点击列表中的名称或按 Enter 键将完成该名称。（图 12-7）。
图 12-7。左：类型为 dat 的变量的自动完成；右：自动完成到导入data 的结果
这个功能还可以自动添加导入的包依赖。这些截图显示了 TypeScript 文件在 "lodash" 包的 sortBy 函数导入前后的导入和模块代码（图 12-8）。
图 12-8。左：类型为 sortBy 的变量的自动完成；右：自动完成到导入 sortBy 从 lodash 的结果
自动导入是我最喜欢的 TypeScript 功能之一。它们大大加快了通常费力的过程——弄清楚导入的来源，然后明确地输入它们。
同样地，如果你开始键入一个类型化值的属性名称，由 TypeScript 支持的编辑器将提供自动完成已知类型的属性（图 12-9）。
图 12-9。左：类型为 forEach 的属性的自动完成；右：自动完成的结果为 .forEach
自动导入更新
如果重命名文件或将其从一个文件夹移动到另一个文件夹，则可能需要更新该文件的多个导入语句。可能需要在该文件本身以及从该文件导入的任何其他文件中进行更新。
如果使用 VS Code 文件资源管理器拖放文件或将其重命名为嵌套文件夹路径，VS Code 将提供使用 TypeScript 为你更新文件路径。
这些截图显示了将 src/logging.ts 文件重命名为 src/shared/logging.ts 的位置，并相应地更新文件导入（图 12-10）。
图 12-10。左：从 “./logging” 导入的 src/index.ts 文件；中：将 src/logging.ts 重命名为 src/shared/logging.ts；右：更新导入路径的 src/index.ts
多文件编辑可能会使对文件的更改保持未保存状态。请记住在对任何更改的文件进行编辑后保存这些文件。
代码操作
TypeScript 的许多 IDE 实用程序都以动作的形式提供，你可以触发它们。虽然其中一些只修改当前正在编辑的文件，但有些可以同时修改许多文件。使用这些代码操作是一种很好的方法，可以让 TypeScript 为你执行许多手动编写代码任务，例如计算导入路径和常见的重构操作。
当编辑器中可用时，代码操作通常以某种图标表示。例如，VS Code 在至少一个可用的代码操作时在文本光标旁边显示一个可点击的灯泡图标（图 12-11）。
图 12-11。导致类型错误的名称旁边的代码操作灯泡
编辑器通常提供快捷键来操作其代码操作菜单或类似功能，这允许你触发本章中的任何操作而不使用鼠标。例如，VS Code 默认打开代码操作菜单的快捷键为 Mac 上的Cmd + . 和 Linux/Windows 上的 Ctrl + .。向上和向下箭头选择下拉选项，Enter 键激活其中一个。
这些代码操作，特别是重命名和重构，由于受到 TypeScript 类型系统的影响而变得特别强大。在将操作应用于类型时，TypeScript 将了解在所有文件中哪些值属于该类型，并可以将任何必要的更改应用于这些值。
重命名
更改已存在的名称（例如函数、接口或变量的名称）手动执行可能很麻烦。TypeScript 可以对名称执行重命名，该重命名还会更新对该名称的所有引用。
重命名符号（F2）上下文菜单选项将创建一个文本框，你可以在其中键入新名称。例如，触发函数名称的重命名将提供一个文本框来重命名该函数及其所有调用。按 Enter 键应用该名称（图 12-12）。
图 12-12。用于重命名 log 函数的弹框，替换成了 logData
如果要查看在应用新名称之前会发生什么情况，请按 Shift + Enter 打开“重构预览”窗格，其中列出了将发生的所有文本更改（图 12-13）。
图 12-13。重构预览以重命名 log 函数，在两个文件中预览 logData
删除未使用的代码
许多 IDE 会巧妙地更改未使用代码的可视外观，例如从未引用的导入值和变量。例如，VS Code 将它们的不透明度降低了约三分之一。
TypeScript 提供用于删除未使用代码的代码操作。（图 12-14） 显示了要求 TypeScript 删除未使用的 import 语句的结果。
图 12-14。左：选择未使用的导入并打开重构菜单；右：TypeScript 删除后的文件
其他快速修复
许多 TypeScript 错误消息是有关于一些可以快速修复的代码问题，例如关键字或变量名中的小错误。其他常用的TypeScript快速修复包括：
- 在类或接口上声明缺少的属性
- 纠正拼写错误的字段名称
- 填写已声明为类型的变量缺失的属性
当你在发现之前从未见过的错误消息时，建议检查快速修复列表。你永远不知道TypeScript提供了什么有用的工具来解决这个问题！
重构
TypeScript 语言服务提供了各种各样的方便代码更改。有些仅仅是移动代码行，而有些则更复杂，比如帮助你创建新函数。
当你选中了一段代码时，VS Code 将在你的选区旁边显示一个灯泡图标。单击它以查看可用的重构列表。
下面的示例展示了一个开发者将内联数组文字提取到 const 变量中的过程（图 12-15）。
图 12-15。左：选择一个数组文字并打开重构菜单；右：提取到常量变量
有效处理错误
阅读并采取行动解决错误信息是使用任何编程语言的事实。每个开发人员，无论对 TypeScript 语言的熟练程度如何，在编写 TypeScript 代码时都会触发大量TypeScript 编译器错误。利用 IDE 功能以增强/你有效处理 TypeScript 编译器错误的能力，将有助于/你在语言上变得更加高效。
语言服务错误
编辑器通常会在有问题的代码下方标出由 TypeScript 语言服务报告的错误，使用鼠标悬停在被下划线标记的字符上会在旁边显示一个浮动框，其中包含错误的文本提示。（图 12-16）。
图 12-16。将信息悬停在不存在的变量上
VS Code 还在其“面板”部分的“问题”选项卡中显示任何打开文件的错误。鼠标悬停框中左下角的“查看问题”链接将打开在问题行之后和任何后续行之前插入的消息的内联显示（图 12-17）。
图 12-17。查看不存在的变量的问题内联显示
当同一源文件中存在多个问题时，其显示将包括向上和向下箭头，你可以使用这些箭头在它们之间切换。F8 和 Shift + F8 将分别作为快捷方式，分别向前和向后查看该问题列表（图 12-18）。
图 12-18。两个“查看问题”内联显示不存在的变量之一
问题选项卡
VS Code 在面板中包括一个“问题“（Problems）选项卡，顾名思义，会显示/你的工作区中的任何问题，包括 TypeScript 语言服务报告的错误。
以下是一个“问题”选项卡的截图，显示一个TypeScript文件中的两个问题（图 12-19）。
图 12-19。显示文件中两个错误的问题选项卡
单击“问题”选项卡中的任何错误都会将文本光标带到其文件中的违规行和列。
请注意，VS Code 只会列出当前打开的文件的问题。如果你想要一个实时更新的所有 TypeScript 编译器问题的列表，你需要在终端中运行 TypeScript 编译器。
运行终端编译器
在 TypeScript 项目中工作时，我建议在终端中以监视模式（在第13章“配置选项”中介绍）运行 TypeScript 编译器。这样做将为/你提供一个实时更新的问题列表，不仅仅是文件中的问题。
在 VS Code 中执行此操作，打开终端面板并运行 tsc -w（如果使用项目引用，则运行 tsc -b -w，这也在第13章“配置选项”中介绍）。现在，/你应该可以看到终端显示了项目中所有 TypeScript 问题，如此截图所示（图 12-20）。
图 12-20。在终端中运行 tsc -w 以报告文件中的问题
Cmd （Mac）/ Ctrl （Windows） + 单击文件名也会将文本光标带到其文件中的违规行和列。
某些项目使用 VS Code launch.json 配置在监视模式下使用 TypeScript 编译器启动终端。访问 code.visualstudio.com/docs/editor/tasks 以获取有关 VS Code 任务的完整参考。
了解类型
你有时会发现，你需要学习以不明显的方式设置的事物的类型。对于任何值，你可以将鼠标悬停在其名称上以查看显示其类型的悬停框。
此截图显示了变量的悬停框（图 12-21）。
图 12-21。将信息悬停在变量上
悬停时按住 Ctrl 可同时显示名称的声明位置。
此截图显示了与之前相同的变量的 Ctrl 悬停框（图 12-22）。
图 12-22。变量上的扩展悬停信息
悬停信息框也可用于类型，例如类型别名。此截图显示将鼠标悬停在 keyof typeof 类型上以查看其等效的字符串文本并集（图 12-23）。
图 12-23。扩展了类型的悬停信息
在尝试理解复杂类型的组件时，我发现一种有用的策略是创建一个仅表示类型一个组件的类型别名。然后，你可以将鼠标悬停在该类型别名上以查看其类型结果。
以前面的 FruitsType 类型为例，可以通过重构将其 typeof fruits 部分提取到单独的中间类型中。然后，可以将鼠标悬停在该中间类型上以查看类型信息（图 12-24）。
图 12-24。左：提取 FruitsType 类型的部分；右：将鼠标悬停在该提取的类型上
中间类型别名策略对于调试第 15 章 “类型操作”中介绍的类型操作特别有用。
总结
在本章中，你探索了使用 TypeScript 的 IDE 集成来提高编写 TypeScript 代码的能力：
- 打开有关类型和值的上下文菜单以列出其可用命令
- 通过查找定义、引用和实现来导航代码
- 使用名称完成和自动导入自动编写代码
- 更多代码操作，包括重命名和重构
- 查看和理解语言服务错误的策略
- 了解类型的策略
现在你已经读完了这一章，你最好练习一下学到的东西 https://learningtypescript.com/using-ide-features.
恋爱中的情侣会对彼此说些什么？
“你让我变得完整!”
评论 (0)