重构 TypeScript

源代码重构可以通过在不改变运行时行为的情况下重构代码来提高项目的质量和可维护性。Visual Studio Code 支持重构操作（refactorings），例如提取方法和提取变量，以便在编辑器内改进您的代码库。

Visual Studio Code 通过 TypeScript 语言服务内置了对 TypeScript 重构的支持，在本主题中，我们将演示对 TypeScript 语言服务的重构支持。

重命名

最简单的重构之一是重命名方法或变量。按 F2 即可在您的 TypeScript 项目中重命名光标下的符号

Renaming a method

重构

要查看可用的 TypeScript 重构，请将光标置于源代码的某个区域，然后右键单击以显示编辑器上下文菜单并选择 重构 (Refactor)，或直接按 ⌃⇧R (Windows, Linux Ctrl+Shift+R)。

TypeScript refactoring

有关重构以及如何为单个重构配置键盘快捷键的更多信息，请参阅重构。

可用的 TypeScript 重构包括

提取到方法或函数 (Extract to method or function) - 将选定的语句或表达式提取到文件中的新方法或新函数。

选择 提取到方法 (Extract to method) 或 提取到函数 (Extract to function) 重构后，输入提取的方法/函数的名称。
提取到常量 (Extract to constant) - 将选定的表达式提取到文件中的一个新常量。
将类型提取到接口或类型别名 (Extract type to interface or type alias) - 将选定的复杂类型提取到接口或类型别名。
移动到新文件 (Move to new file) - 将文件顶层作用域中的一个或多个类、函数、常量或接口移动到新文件。新文件的名称是从所选符号的名称推断出来的。
在命名导入和命名空间导入之间转换 (Convert between named imports and namespace imports) - 在命名导入 (import { Name } from './foo') 和命名空间导入 (import * as foo from './foo') 之间进行转换。
在默认导出和命名导出之间转换 (Convert between default export and named export) - 在使用 export default 和具有命名导出 (export const Foo = ...) 之间进行转换。
将参数转换为解构对象 (Convert parameters to destructured object) - 将接受大量参数的函数重写为接受单个参数对象。
生成 get 和 set 访问器 (Generate get and set accessors) - 通过为其生成 getter 和 setter 来封装选定的类属性。
推断函数返回类型 (Infer function return types) - 向函数添加显式的返回类型注释。
为箭头函数添加/移除大括号 (Add/remove braces from arrow function) - 将单行箭头函数转换为多行，反之亦然。

快速修复

快速修复 (Quick Fixes) 是用于解决简单编码错误的建议性编辑。示例快速修复包括

向成员访问添加缺失的 this。
修复拼写错误的属性名称。
删除不可达代码或未使用的导入
声明

当您将光标置于 TypeScript 错误上时，VS Code 会显示一个灯泡，指示快速修复可用。单击灯泡或按 ⌘. (Windows, Linux Ctrl+.) 以显示可用快速修复和重构的列表。

此外，代码操作小组件: 包含附近的快速修复 (Code Action Widget: Include Nearby Quick Fixes) (editor.codeActionWidget.includeNearbyQuickFixes) 是默认启用的设置，它将激活一行中最接近的快速修复，无论光标在该行中的哪个位置，只需按 ⌘. (Windows, Linux Ctrl+.) (命令 ID editor.action.quickFix) 即可。

该命令会突出显示将通过快速修复进行重构或修复的源代码。普通代码操作和非修复重构仍可在光标位置激活。

未使用的变量和不可达代码

未使用的 TypeScript 代码，例如 if 语句中永远为真的 else 块或未引用的导入，在编辑器中会显示为淡出状态

Unreachable source code faded out

您可以通过将光标置于其上并触发快速修复命令（⌘. (Windows, Linux Ctrl+.)）或单击灯泡来快速删除此未使用的代码。

要禁用未使用的代码淡出，请将 "editor.showUnused" 设置为 false。您也可以仅针对 TypeScript 禁用未使用的代码淡出，方法是设置

"[typescript]": {
    "editor.showUnused":  false
},
"[typescriptreact]": {
    "editor.showUnused":  false
},

组织导入

整理导入 (Organize Imports) 源代码操作会对 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 (Editing TypeScript) - 了解 VS Code 的 TypeScript 编辑功能。
调试 TypeScript - 为您的 TypeScript 项目配置调试器。

02/04/2026