第一次使用 IDE 编程
感觉
就像是超能力。
如果没有语法突出显示和其他 IDE 功能来帮助开发，任何流行的编程语言都是不完整的。TypeScript 最大的优势之一是它的语言服务为 JavaScript 和 TypeScript 代码提供了一套强大的开发助手。本章将介绍一些最有用的项目。
我强烈建议您在本书中构建的 TypeScript 项目中尝试这些 IDE 功能。尽管本章中的所有示例和截图都是我最喜欢的编辑器 VS Code，但任何支持 TypeScript 的 IDE 都将支持本章的大部分或全部内容。截至 2022 年，其中包括至少所有以下各项的原生支持或 TypeScript 插件：Atom、Emacs、Vim、Visual Studio 和 WebStorm。
本章是一些更常用的 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.ts 中 data 变量声明的“转到引用”，其中显示了该声明及其在另一个文件 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 的结果
还将为包依赖项提供自动导入添加。以下截图显示了从 “lodash” 包导入 sortBy 之前和之后的 TypeScript 文件的导入和模块代码（图 12-8）。
图 12-8。左：类型为 sortBy 的变量的自动完成；右：自动完成到导入sortBy从lodash的结果
自动导入是 TypeScript 体验中我最喜欢的功能之一。它们大大加快了通常费力的过程，即弄清楚进口来自哪里，然后明确地输入出来。
同样，如果您开始从类型化值键入属性的名称，则由 TypeScript 提供支持的编辑器将提供自动完成值类型的已知属性的功能（图 12-9）。
图 12-9。左：类型为 forEach 的属性的自动完成；右：自动完成的结果为 .forEach
自动导入更新
如果重命名文件或将其从一个文件夹移动到另一个文件夹，则可能需要更新该文件的多个导入语句。可能需要在该文件本身以及从该文件导入的任何其他文件中进行更新。
如果使用 VS Code 文件资源管理器拖放文件或将其重命名为嵌套文件夹路径，VS Code 将提供使用 TypeScript 为您更新文件路径。
以下截图显示了 src/logging.ts file 重命名为 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 打开代码操作菜单的默认快捷方式是 Cmd + . 在 Mac 上和 Ctrl + . 在 Linux/Windows 上。向上和向下箭头选择下拉选项，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 错误消息针对的是可以快速纠正的代码问题，例如关键字或变量名称中的小拼写错误。其他常用的 Type-Script 快速修复包括：
- 在类或接口上声明缺少的属性
- 更正键入错误的字段名称
- 填充声明为类型的变量的缺失属性
我建议您在发现以前从未见过的错误消息时检查快速修复列表。您永远不知道 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 在其面板中包含一个“问题”选项卡，顾名思义，该选项卡会显示工作区中的任何问题。这包括 TypeScript 语言服务报告的错误。
以下截图显示了一个“问题”选项卡，其中显示了 TypeScript 文件中的两个问题（图 12-19）。
图 12-19。显示文件中两个错误的问题选项卡
单击“问题”选项卡中的任何错误都会将文本光标带到其文件中的违规行和列。
请注意，VS Code 只会列出当前打开的文件的问题。如果您想要一个实时更新的所有 TypeScript 编译器问题的列表，您需要在终端中运行 TypeScript 编译器。
运行终端编译器
我建议在 TypeScript 项目中工作时，在终端中以监视模式运行 TypeScript 编译器（在第 13 章“配置选项”中介绍）。这样做将为您提供所有问题的实时更新列表，而不仅仅是文件中的问题。
要在 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)