重构 TypeScript
源代码重构可以在不修改运行时行为的情况下,通过重构代码来提高项目的质量和可维护性。Visual Studio Code 支持重构操作(refactorings),例如提取方法和提取变量,以在编辑器内改进您的代码库。
Visual Studio Code 通过 TypeScript 语言服务内置了对 TypeScript 重构的支持,在本主题中,我们将演示使用 TypeScript 语言服务进行重构的支持。
重命名
最简单的重构之一是重命名方法或变量。按 F2 可在整个 TypeScript 项目中重命名光标下的符号。
重构
要查看可用的 TypeScript 重构,请将光标置于源代码的某个区域,然后右键单击以调出编辑器上下文菜单并选择重构,或者直接按 ⌃⇧R (Windows、Linux 为 Ctrl+Shift+R)。
有关重构以及如何为单个重构配置键盘快捷键的更多信息,请参阅重构。
可用的 TypeScript 重构包括:
-
提取到方法或函数 - 将选定的语句或表达式提取到文件中的新方法或新函数中。
选择提取到方法或提取到函数重构后,输入提取的方法/函数的名称。
-
提取到常量 - 将选定的表达式提取到文件中的新常量。
-
提取类型到接口或类型别名 - 将选定的复杂类型提取到接口或类型别名。
-
移动到新文件 - 将文件顶层作用域中的一个或多个类、函数、常量或接口移动到一个新文件中。新文件的名称是根据所选符号的名称推断出来的。
-
在命名导入和命名空间导入之间转换 - 在命名导入 (
import { Name } from './foo'
) 和命名空间导入 (import * as foo from './foo'
) 之间进行转换。 -
在默认导出和命名导出之间转换 - 从使用
export default
转换为使用命名导出 (export const Foo = ...
)。 -
将参数转换为解构对象 - 重写一个接受长参数列表的函数,使其接受单个参数对象。
-
生成 get 和 set 访问器 - 通过为选定的类属性生成 getter 和 setter 来封装它。
-
推断函数返回类型 - 为函数添加显式的返回类型注解。
-
为箭头函数添加/移除大括号 - 将单行箭头函数转换为多行,反之亦然。
快速修复
快速修复是建议的编辑,用于解决简单的编码错误。快速修复的例子包括:
- 为成员访问添加一个缺失的
this
。 - 修复拼写错误的属性名。
- 移除无法访问的代码或未使用的导入。
- 声明
当您将光标移到 TypeScript 错误上时,VS Code 会显示一个灯泡,表示有可用的快速修复。单击灯泡或按 ⌘. (Windows、Linux 为 Ctrl+.) 以显示可用快速修复和重构的列表。
此外,代码操作小部件:包括附近的快速修复 (editor.codeActionWidget.includeNearbyQuickFixes
) 是一个默认启用的设置,它将从 ⌘. (Windows、Linux 为 Ctrl+.) (命令 ID editor.action.quickFix
) 激活一行中最近的快速修复,无论您的光标在该行的哪个位置。
该命令会突出显示将通过快速修复进行重构或修复的源代码。普通代码操作和非修复重构仍可在光标位置激活。
未使用的变量和无法访问的代码
未使用的 TypeScript 代码,例如始终为 true 的 if
语句的 else
块或未引用的导入,会在编辑器中以淡出显示。
您可以通过将光标放在上面并触发快速修复命令(⌘. (Windows、Linux 为 Ctrl+.))或单击灯泡来快速移除这些未使用的代码。
要禁用未使用代码的淡出显示,请将 "editor.showUnused"
设置为 false
。您也可以通过设置以下内容仅在 TypeScript 中禁用未使用代码的淡出显示:
"[typescript]": {
"editor.showUnused": false
},
"[typescriptreact]": {
"editor.showUnused": false
},
组织导入
组织导入源代码操作会对 TypeScript 文件中的导入进行排序,并移除未使用的导入。
您可以从源操作上下文菜单运行组织导入,或使用 ⇧⌥O (Windows、Linux 为 Shift+Alt+O) 键盘快捷键。
通过设置以下内容,也可以在保存 TypeScript 文件时自动组织导入:
"editor.codeActionsOnSave": {
"source.organizeImports": "explicit"
}
在文件移动时更新导入
当您移动或重命名被 TypeScript 项目中其他文件导入的文件时,VS Code 可以自动更新所有引用该移动文件的导入路径。
typescript.updateImportsOnFileMove.enabled
设置控制此行为。有效的设置值为:
"prompt"
- 默认值。每次文件移动时询问是否应更新路径。"always"
- 始终自动更新路径。"never"
- 不自动更新路径,也不提示。
保存时代码操作
editor.codeActionsOnSave
设置允许您配置一组在文件保存时运行的代码操作。例如,您可以通过设置以下内容来启用保存时组织导入:
// On explicit save, run fixAll source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
"source.fixAll": "explicit",
"source.organizeImports": "always",
}
截至今天,支持以下枚举:
explicit
(默认): 在显式保存时触发代码操作。与true
相同。always
:明确保存时以及窗口或焦点更改的自动保存时触发代码操作。never
:从不触发保存时的代码操作。与false
相同。
您也可以将 editor.codeActionsOnSave
设置为一个按顺序执行的代码操作数组。
以下是一些源操作:
"organizeImports"
- 启用保存时组织导入。"fixAll"
- “保存时自动修复”在一轮中计算所有可能的修复(适用于所有提供者,包括 ESLint)。"fixAll.eslint"
- 仅为 ESLint 自动修复。"addMissingImports"
- 在保存时添加所有缺失的导入。
有关更多信息,请参阅TypeScript。
代码建议
VS Code 会自动建议一些常见的代码简化,例如将 promise 上的一系列 .then
调用转换为使用 async
和 await
。
将 "typescript.suggestionActions.enabled"
设置为 false
以禁用建议。
后续步骤
继续阅读以了解:
- 编辑 TypeScript - 了解 VS Code 为 TypeScript 提供的编辑功能。
- 调试 TypeScript - 为您的 TypeScript 项目配置调试器。