重构TypeScript

源代码重构可以通过重构代码，提高项目质量和可维护性，同时不修改运行时行为。Visual Studio Code 支持重构作（重构），如 Extract Method 和 Extract Variable，以从编辑器内改进代码库。

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

更名

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

重构

要查看可用的 TypeScript 重构，将光标放在源代码的一个区域，右键点击调出编辑器右键菜单并选择重构，或直接按 ⌃⇧R（Windows，Linux Ctrl+Shift+R）。

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

可用的TypeScript重构包括：

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

  

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

• 提取到常数——将选中的表达式提取到文件中的一个新常量。

  

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

  

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

  

• 在命名导入和命名空间导入之间转换——在命名导入之间转换（import { Name } from './foo'）和命名空间导入（引进 * 作为 foo 来自 './foo').

  

• 在默认导出和命名导出之间转换——从导出默认并且有命名的导出（出口条件 Foo = ...).

• 将参数转换为结构化对象——重写一个需要大量参数的函数，从而接收单个参数的对象。

• 生成 get 和 set 访问器——通过生成 getter 和 setter 来封装所选类属性。

  

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

  

• 添加/移除箭头功能中的大括号——将单线箭头功能转换为多线并再转换回来。

快速修复

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

• 添加缺失就是这样会员访问。
• 纠正拼写错误的房产名称。
• 移除无法访问的代码或未使用的导入
• 宣告

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

此外，代码动作小部件：包含附近的快速修复 (editor.codeActionWidget.includeNearbyQuickFixes）是默认启用的设置，会在⌘的一行内激活最近的快速修复。（Windows，Linux Ctrl+。）（命令IDeditor.action.quickFix），无论你的光标在该行的哪个位置。

该命令会高亮将通过快速修复重构或修复的源代码。正常的代码动作和非修复重构仍可在光标位置激活。

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

未使用的 TypeScript 代码，例如否则一个如果总是为真或未被引用的导入语句，在编辑器中会逐渐淡出：

你可以通过将光标放在它上并触发快速修复命令（⌘.（Windows，Linux Ctrl+.）或者点亮灯泡。

要禁用未使用代码的渐隐，请设置“编辑.show未使用”到错误.你也可以在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设置控制这种行为。有效的设置值如下：

• “提示”- 默认。询问是否应该为每次文件移动更新路径。
• “永远”- 始终自动更新路径。
• “永远不会”- 不自动更新路径，也不提示。

保存时的代码作

该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",
}

截至目前，支持以下枚举：

• 显式（默认）：明确保存时触发代码动作。和确实如此.
• 永远：在明确保存时触发代码动作，且自动保存时窗口或焦点变化。
• 绝不存档时从未触发代码动作。和错误.

你也可以设置editor.codeActionsOnSave（编辑）作保存将代码动作数组按顺序执行。

以下是一些来源作：

• “组织进口”- 支持存档时组织导入。
• “修复一切”- 自动修复存档（Auto Fix on Save on Ave）在一轮内计算所有可能的修复（涵盖所有提供者，包括 ESLint）。
• “fixAll.eslint”- 仅对ESLint进行自动修复。
• “addMissingImports”- 在存档中添加所有缺失的导入。

更多信息请参见 TypeScript。

代码建议

VS Code 会自动建议一些常见的代码简化，比如将 的链转换为。那么以承诺为代价异步以及等待

赛场“typescript.suggestionActions.enabled”到错误关闭建议。

下一步

继续阅读，了解：

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