重构 TypeScript

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

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

重命名

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

重构

要查看可用的 TypeScript 代码重构，请将光标放在源代码的某个区域，然后右键单击以打开编辑器上下文菜单并选择 Refactor 或按 ⌃⇧R （Windows, Linux Ctrl+Shift+R）。

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

可用的 TypeScript 代码重构包括：

• 提取到方法或函数 - 将选定的语句或表达式提取到文件中的新方法或新函数。

  

  在选择提取到方法或提取到函数 重构后，输入提取后的方法/函数名称。

• 提取为常量 - 将选定的表达式提取到文件中的新常量。

  

• 提取类型到接口或类型别名 - 将选定的复杂类型提取为接口或类型别名。

  

• 移动到新文件 - 将文件顶级作用域中的一个或多个类、函数、常量或接口移动到新文件。新文件的名称从所选符号的名称推断而来。

  

• 在命名导入和命名空间导入之间进行转换 - 在命名导入 (import { Name } from './foo') 和命名空间导入 (导入 * 作为foo从'./foo')。

  

• 在默认导出和命名导出之间进行转换 - 从使用一个导出默认并有一个命名的导出 (导出 constFoo = ...)。

• 将参数转换为解构对象 - 重写一个接受长参数列表的函数，使其接受一个单一的参数对象。

• 生成获取和设置访问器 - 通过为选定的类属性生成获取器和设置器来封装它。

  

• 推断函数返回类型 - 为函数添加显式返回类型注释。

  

• 添加/移除箭头函数的括号 - 将单行箭头函数转换为多行并反之。

快速修复

快速修复是针对简单编码错误的建议编辑。快速修复示例包括：

• 添加缺失的这个到成员访问。
• 修正拼写错误的属性名称。
• 移除无法到达的代码或未使用的导入语句
• 声明

当你的光标移动到 TypeScript 错误上时，VS Code 会显示一个灯泡，表示有快速修复可用。点击灯泡或按 ⌘.（Windows, Linux Ctrl+.）以显示可用的快速修复和重构列表。

此外，代码操作小部件：包含附近的快速修复 (editor.codeActionWidget.includeNearbyQuickFixes) 是默认启用的设置，这将从⌘.激活最近的快速修复。（Windows, Linux Ctrl+.）（命令 ID 编辑器操作快速修复)，无论你的光标在那行的哪个位置。

该命令会突出显示将被快速修复或优化的源代码。正常代码操作和非修复的优化仍然可以在光标位置激活。

未使用的变量和无法到达的代码

未使用的TypeScript代码，例如否则块的an如果始终为真或未引用的导入语句在编辑器中被淡出显示：

你可以通过将光标放在未使用的代码上并触发快速修复命令 (⌘. (Windows, Linux Ctrl+.)) 或点击小灯泡来快速删除这段未使用的代码。

要禁用未使用代码的淡出效果，请设置"editor.showUnused"至假的您还可以通过设置禁用未使用代码的淡入淡出效果，仅在 TypeScript 中：

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

组织进口

该整理导入源代码操作会整理TypeScript文件中的导入并移除未使用的导入：

你可以运行组织导入从源操作上下文菜单中，或者使用⇧⌥O（Windows, LinuxShift+Alt+O）键盘快捷键。

自动组织导入可以通过设置在保存TypeScript文件时自动完成：

"editor.codeActionsOnSave"：
    "source.organizeImports"："explicit"
]

更新文件移动后的导入

当您移动或重命名在您的 TypeScript 项目中导入的文件时，VS Code 可以自动更新所有引用移动文件的导入路径。

该typescript.更新导入文件时的导入项启用设置控制此行为。有效的设置值为：

• 提示- 默认。询问是否应为每个文件移动更新路径。
• "总是"- 始终自动更新路径。
• “从不”- 不要自动更新路径，也不要提示。

保存时的代码操作

该编辑器.保存时代码操作设置允许您配置一组在文件保存时运行的代码操作。例如，您可以通过设置启用保存时的导入整理：

// 显式保存时，运行 fixAll 源操作。自动保存（Windows或焦点更改）时，运行 organizeImports 源操作。
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "always",
}

截至今天，支持以下枚举类型：

• 明确的（默认）：在明确保存时触发代码操作。同真输入：.
• 总是触发代码操作：当显式保存和因Windows或焦点变化自动保存时。
• 从不: 从不触发保存时的代码操作。与 假的输入：.

你也可以设置编辑器.保存时代码操作对按顺序执行的代码操作数组。

以下是一些源操作：

• "organizeImports"- 启用保存时组织导入。
• "修复所有"- 保存时自动修复在一次计算中完成所有可能的修复（包括ESLint的所有提供者）。
• "fixAll.eslint"- 仅对ESLint自动修复。
• "添加缺失的导入"- 保存时添加所有缺失的导入。

参见TypeScript了解更多信息。

代码建议

VS Code自动建议一些常见的代码简化，例如将链式转换转换为.然后呼吁使用承诺异步和等待

设置"typescript.suggestionActions.enabled"至假的禁用建议。

下一步

继续阅读，了解：

• 编辑 TypeScript - 了解 VS Code 编辑 TypeScript 的功能。
• 调试 TypeScript - 配置你的 TypeScript 项目的调试器。