PyCharm 2025.3 Help

重构 TypeScript

重构 是在不改变应用行为的情况下更新源代码。 重构有助于让您的代码保持健壮、 DRY ,且易于维护。

移动重构

除了 移动文件和文件夹 之外,PyCharm 还允许您移动 TypeScript 顶层符号。 移动符号重构 适用于 ES6 模块中的类、函数和变量。

移动类、函数或变量

  1. 选择要移动的符号。

  2. 按下 F6 ,或从主菜单或所选内容的上下文菜单中选择 重构 | 移动。 或者,选择 重构 | 就地重构 或按 Ctrl+Alt+Shift+T ,然后在列表中选择 移动。

    将打开 移动模块成员 对话框。

  3. 指定目标文件并选择要移动的成员。

  4. 默认情况下,PyCharm 会自动将成员的可见性提升到所需级别。 如果希望保持可见性级别不变,请在 可见性 中点击 按原样。

上移类成员重构

上移类成员 重构会沿类层次结构将类方法上移——从当前类移动到其超类或其实现的接口。

假设您有一个类 AccountingDepartment ,它扩展抽象类 Department 并实现接口 ReportingDepartment。

abstract class Department { constructor(public name: string) { } printName(): void { console.log("Department name: " + this.name); } } interface ReportingDepartment { generateReports(): void } class AccountingDepartment extends Department implements ReportingDepartment { constructor() { super("Accounting and Auditing"); } printMeeting(): void { console.log("The Accounting Department meets each Monday at 10 a.m"); } generateReports(): void { console.log("Generating accounting reports..."); } }

示例 1:将类方法移动到超类

在此示例中, PrintMeeting() 方法从 AccountingDepartment 移动到 Department。

abstract class Department { constructor(public name: string) { } printName(): void { console.log("Department name: " + this.name); } printMeeting(): void { console.log("The Accounting Department meets each Monday at 10 a.m"); } } interface ReportingDepartment { generateReports(): void } class AccountingDepartment extends Department implements ReportingDepartment { constructor() { super("Accounting and Auditing"); } generateReports(): void { console.log("Generating accounting reports..."); } }
将类方法上移到超类

示例 2:将类方法移动到接口

在此示例中, PrintMeeting() 方法从类 AccountingDepartment 复制到接口 ReportingDepartment。

abstract class Department { constructor(public name: string) { } printName(): void { console.log("Department name: " + this.name); } } interface ReportingDepartment { generateReports(): void printMeeting(): void } class AccountingDepartment extends Department implements ReportingDepartment { constructor() { super("Accounting and Auditing"); } printMeeting(): void { console.log("The Accounting Department meets each Monday at 10 a.m"); } generateReports(): void { console.log("Generating accounting reports..."); } }

将类的方法移至超类或接口

  1. 将插入符号置于您要上移成员的类中的任意位置。

  2. 从主菜单或上下文菜单中选择 重构 | 上拉成员。 将打开 上拉成员 对话框。

  3. 在列表中选择要将方法移动到的超类或接口。

  4. 要上移某个方法,请在 要上拉的成员 列表中选中其旁边的复选框。 如适用,请选中该方法旁边的 设为抽象 复选框以进行移动。

重命名重构

除了 重命名文件和文件夹 (适用于任何语言),您还可以重命名类、方法、变量、参数和字段。 PyCharm 会在声明处更改符号名称,并默认更新当前项目中的所有用法。

重命名重构

重命名 重构默认在原地执行,但您可以按 Shift+F6 在 重命名 对话框中配置重构范围。

若要默认打开该对话框,请打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器 | 代码编辑 ,并在 指定重构选项 区域选择 在模态对话框中 选项。

  1. 在编辑器中,选择要重命名的类、方法、变量或字段,然后按 Shift+F6 ,或从上下文菜单中选择 重命名。

  2. 在带有画布的字段中指定符号的新名称。 键入名称,或从列表中选择一个合适的名称。

  3. 可选:

    点击高亮符号旁边的 在注释和字符串中重命名的图标 在文本出现位置重命名的图标 ,打开 同时在以下位置重命名 弹出窗口,并选择 在注释和字符串中搜索 和 搜索文本出现位置 复选框,以在注释、字符串字面量和文本中重命名该符号的用法。

  4. 可选:

    若要打开具有更多选项的 重命名 对话框,请再次按 Shift+F6。

    • 选中 在注释和字符串中搜索 复选框,以在注释、文档注释和字符串字面量中重命名该符号的用法。

    • 选中 搜索文本出现位置 复选框,以在 HTML 及项目中包含的其他文件的文本中重命名匹配的符号。

    • 选中 在 JavaScript 文件中搜索 复选框,以在生成的 JavaScript 代码中重命名该符号的用法。

    • 选中 搜索动态引用 复选框,以重命名该符号的动态用法。

      请注意,将动态用法包含在重构中可能会导致错误的重命名,如下例所示。 此处, target 在 console.log(e.target) 中可以更改为 myTarget ,因为 e 的类型为 any ,这意味着它也可能是 myInt。

      interface myInt { target: string } function onClick(e: any) { console.log(e.target); }
      interface myInt { myTarget: string } function onClick(e: any) { console.log(e.myTarget); }
  5. 为避免错误的重命名,请在应用之前 预览更改。

    默认情况下,在 重构预览 工具窗口中,符号的所有动态用法都被标记为已排除,并归类到 代码中对 <symbol> 的动态引用 节点下。 要将重构应用于某个用法,请在其上下文菜单中选择 包含。

    重构预览:符号的动态用法被标记为从重构中排除

保持类与其所在文件的名称一致

当您重命名类时,PyCharm 还会在文件与其同名时建议重命名该文件。 如果您接受该建议,PyCharm 会在其他文件的 import 语句中更新此文件的名称。

如果您拒绝此建议,您可以随时使用 重命名文件... 意图操作重命名该文件。 如果您刚创建了一个新文件,但在其中开始键入类或接口时又想到了更好的名称,此功能将很有用。

另一个意图操作会建议将该类移动到具有相应名称的新文件中。 建议的文件名格式由 Code Style: JavaScript 页面上的 文件名约定 列表中所选样式决定。

使文件名与对应类名一致

  1. 将插入符号置于类名处,然后按 Alt+Enter。

  2. 在意图列表中,选择 将文件重命名为 <class_name.ts> 以匹配类名 或 将类 <class_name> 移动到文件 <class_name.ts>。

    将类移动到文件并保持名称一致

提取/引入重构

PyCharm 提供多种 提取 重构,用于引入参数、变量、常量、字段、方法和函数。 要运行这些重构中的任意一个,请选择要重构的表达式,然后选择 重构 | <target>。 您可以选择整个表达式,或将插入符号置于表达式内部的任意位置,PyCharm 将帮助您完成选择。

引入参数

使用 引入参数 重构,将函数调用中的某个表达式替换为参数。 PyCharm 将相应更新该函数的声明及其调用。 新参数的默认值可以在函数体内进行初始化,或通过函数调用传递。

假设在函数 greeter() 中有一段包含硬编码 "Hello, " 的代码。

function greeter(firstName : String, lastName : String) { return "Hello, " + firstName + " " + lastName; } document.body.innerHTML = greeter("Jane","User");

通过引入参数重构,您可以将此硬编码的 "Hello, " 替换为 greeting 参数。 新的 greeting 参数可以提取为 可选 或 必需。

示例 1:提取可选参数

新参数 greeting 被提取为可选参数。 使用函数的默认参数语法,将新参数添加到 greeter() 的定义中。 greeter() 的调用不会更改。

function greeter(firstName : String, lastName : String, greeting = "Hello, ") { return greeting + firstName + " " + lastName; } document.body.innerHTML = greeter("Jane","User");

示例 2:提取必需参数

在此示例中,新参数 greeting 被提取为必需参数。 因此,相应的函数调用(document.body.innerHTML = greeter(user); 会相应更改。

function greeter(firstName : String, lastName : String, greeting: string) { return greeting + firstName + " " + lastName; } document.body.innerHTML = greeter("Jane", "User", "Hello, ");

引入参数

  1. 在编辑器中,将插入符号置于您想转换为参数的表达式内,然后按 Ctrl+Alt+P ,或从上下文菜单中选择 重构 | 引入参数。

    或者,执行以下任一操作:

    • 按 Ctrl+Alt+Shift+T 并选择 引入参数。

    • 转到 重构 | 提取 | 参数。

  2. 如果在当前插入符号位置检测到多个表达式,请从 表达式 列表中选择所需的表达式。

    引入参数:选择表达式
  3. 如果找到所选表达式的多个出现,请在 找到多个出现位置 列表中选择 仅替换此处 或 替换所有出现位置。 最后,将显示用于配置重构的弹出窗口。

    引入参数弹出窗口
  4. 选择 生成 JSDoc 以生成 JSDoc 注释块。 如果您需要指定自定义的默认参数值,这可能会有所帮助。

  5. 选择新参数的初始化位置,并在适用时指定其默认值:

    • 如果选中 可选参数 复选框,则将在函数体内使用默认值初始化该参数。

    • 如果清除 可选参数 复选框,则默认参数值将通过现有的函数调用传递。 所有函数调用都将根据新的函数签名进行更改,并在函数体中添加参数初始化。

    初始情况下,PyCharm 会将调用该重构的位置处的表达式作为默认值。 在大多数情况下,您不需要更改它。 如果仍有必要,请在 JSDoc 注释中按照 @param <parameter name> - <default value> 的格式指定另一个默认参数值。

    了解有关可选参数和默认参数的更多信息,请参阅 TypeScript 官方网站。

  6. 接受其中一个建议的参数名称,方法是在列表中双击它,或者在带有红色画布的字段中指定自定义名称。 准备就绪后,按 Enter。

    引入参数:结果

选择重构模式

您可以在编辑器中直接提取参数(在就地模式) 如上所述 ,或使用 “引入参数”对话框。 这两种方法相当相似,区别如下:

  • 预览重构结果。

    在对话框中,您可以点击 预览 并在 查找 工具窗口的专用选项卡中查看预期更改。 在就地模式下,此功能不可用。

  • 指定默认参数值。

    在对话框中,PyCharm 会在 值 字段中建议默认参数值,您可以接受该建议或指定其他值。 在就地模式下,PyCharm 将调用该重构的位置处的表达式作为默认参数值。 要指定另一个值,您必须使用 JSDoc 注释块。

引入变量

使用 引入变量 重构,将表达式替换为 函数作用域变量(var)、 块级作用域变量(let)或 块级作用域常量(const)。 该重构使您的源代码更易于阅读和维护。 它还帮助您避免使用硬编码的常量,而不解释它们的值或用途。

function Multiplication(a : number, b : number) { let d = (a + b) * (a + b); return d; } var e = Multiplication(4, 6);
function Multiplication(a : number, b : number) { let c = a + b; let d = (c) * (c); return d; } var e = Multiplication(4, 6);

引入变量

  1. 在编辑器中,选择要转换为变量的表达式,然后按 Ctrl+Alt+V 并从上下文菜单中选择 重构 | 引入变量。

    或者,执行以下任一操作:

    • 按 Ctrl+Alt+Shift+T 并选择 引入变量。

    • 转到 重构 | 提取 | 变量。

  2. 如果在当前插入符号位置检测到多个表达式,请从 表达式 列表中选择所需的表达式。

    引入变量:选择表达式
  3. 如果找到所选表达式的多个出现,请在 找到多个出现位置 列表中选择 仅替换此处 或 替换所有出现位置。

    引入变量:检测到所选表达式的多个出现

    最后,将显示用于配置重构的弹出窗口。

  4. 从列表中选择要在新变量声明中使用的语句:

    引入变量:选择作用域
  5. 接受其中一个建议的参数名称,方法是在列表中双击它,或者在带有红色画布的字段中指定自定义名称。 准备就绪后,按 Enter。

选择重构模式

您可以在编辑器中直接提取变量(在就地模式) 如上所述 ,或使用 “引入变量”对话框。 默认情况下,PyCharm 会在就地模式下运行引入变量重构。 要使用 提取变量 对话框,请打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器 | 代码编辑 ,并在 重构 区域选择 在模态对话框中 选项。

引入常量

使用 引入常量 重构,将表达式替换为 常量。 该重构使您的源代码更易于阅读和维护。 它还帮助您避免使用硬编码的常量,而不解释它们的值或用途。

在不同作用域中引入常量

假设您有一段包含硬编码 Department name: 的代码。

printName(): void { console.log("Department name: " + this.name); }

通过引入常量重构,您可以将此硬编码的 Department name 替换为常量。 引入的常量的作用域取决于新常量的声明上下文(在封闭方法内、作为类的字段,或在任何类之外)。

示例 1:引入的常量 departmentName 在封闭方法 printName() 内声明

printName(): void { console.log("Department name: " + this.name); }
printName(): void { const departmentName = "Department name: "; console.log(departmentName + this.name); }

示例 2:引入的常量被声明为封闭类 AccountingDepartment 的 _departmentName 字段

class AccountingDepartment extends Department implements ReportingDepartment { name: string; printName(): void { console.log("Department name: " + this.name); } }
class AccountingDepartment extends Department implements ReportingDepartment { name: string; private readonly _departmentName = "Department name: "; printName(): void { console.log(this._departmentName + this.name); } }

示例 3:引入的常量 departmentName 在任何类之外声明

class AccountingDepartment extends Department implements ReportingDepartment { name: string; printName(): void { console.log("Department name: " + this.name); } }
abstract class Department {...} const deparmentName = "Department name: "; class AccountingDepartment extends Department implements ReportingDepartment {...}

引入常量

  1. 在编辑器中,选择要转换为常量的表达式,然后按 Ctrl+Alt+C 或从上下文菜单中选择 重构 | 引入常量。

    或者,执行以下任一操作:

    • 按 Ctrl+Alt+Shift+T 并选择 引入常量。

    • 转到 重构 | 提取 | 常量。

    调用引入常量重构
  2. 如果在当前插入符号位置检测到多个表达式,请从 表达式 列表中选择所需的表达式。

    引入常量:选择表达式
  3. 选择新常量的作用域:

    • 局部常量 将在封闭方法内声明,参见 示例 1。

    • 类字段 将在当前类内声明,参见 示例 2。

    • 全局或模块常量 将在任何类之外声明,参见 示例 3。

    引入常量:选择作用域
  4. 如果 PyCharm 检测到表达式的多个出现,请选择是否要替换所有出现,还是仅替换调用重构的位置。

    引入常量:检测到全局常量的多个出现
  5. 接受其中一个建议的参数名称,方法是在列表中双击它,或者在带有红色画布的字段中指定自定义名称。 准备就绪后,按 Enter。

    引入常量:选择名称

引入字段

引入字段 重构会声明一个新字段,并使用所选表达式对其进行初始化。 原始表达式会被替换为该字段的用法。

假设您有以下代码:

class Rectangle { constructor(public height: number, public width: number) { this.height = height; this.width = width; } get area() { return this.calcArea(); } calcArea() { return this.height * this.width; } }

在下面的三个示例中,将引入相同的字段 _calcArea。 这些示例演示了初始化该引入字段的三种不同方式。

示例 1:引入的字段 _calcArea 在封闭方法 get Area() 内初始化

class Rectangle { constructor(public height: number, public width: number) { this.height = height; this.width = width; } private _calcArea: number; get area() { this._calcArea = this.calcArea(); return this._calcArea; } calcArea() { return this.height * this.width; } }

示例 2:引入的字段 _calcArea 在其声明中初始化

class Rectangle { constructor(public height: number, public width: number) { this.height = height; this.width = width; } private _calcArea = this.calcArea(); get area() { return this._calcArea; } calcArea() { return this.height * this.width; } }

示例 3:引入的字段 _calcArea 在类的构造函数中初始化

class Rectangle { constructor(public height: number, public width: number) { this._calcArea = this.calcArea(); this.height = height; this.width = width; } private _calcArea: number; get area() { return this._calcArea; } calcArea() { return this.height * this.width; } }

引入字段

  1. 在编辑器中,选择要转换为常量的表达式,然后按 Ctrl+Alt+F 或从上下文菜单中选择 重构 | 引入字段。

    或者,执行以下任一操作:

    • 按 Ctrl+Alt+Shift+T 并选择 引入字段。

    • 转到 重构 | 提取 | 字段。

  2. 如果 PyCharm 检测到表达式的多个出现,请选择是否要替换所有出现,还是仅替换调用重构的位置。

    在 TypeScript 中提取字段:检测到某个表达式的多次出现
  3. 在弹出窗口中,选择新字段将在哪进行初始化:

    • 当前方法 ,参见 示例 1。

    • 字段声明 ,参见 示例 2。

    • 构造函数 ,参见 示例 3。 请注意,如果您从字段初始值设定项调用重构,则此选项将被禁用。

    在 TypeScript 中提取字段:选择初始化方式
  4. 当在字段声明或构造函数中进行初始化时,新字段可以使用 readonly 修饰符 引入。 为此,请选中 设为只读 复选框。

  5. 选择字段可见性,可用选项为 公共、 私有 和 受保护。 了解有关字段可见性修饰符的更多信息,请参阅 TypeScript 官方网站。

  6. 接受其中一个建议的参数名称,方法是在列表中双击它,或者在带有红色画布的字段中指定自定义名称。 准备就绪后,按 Enter。

选择重构模式

默认情况下,PyCharm 会直接在编辑器中(在就地模式)运行引入字段重构, 如上所述。

要使用 提取字段对话框 ,打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器 | 代码编辑 ,并在 重构 区域选择 在模态对话框中 选项。

重构 TypeScript:引入字段

提取方法

提取方法 重构可让您使用提取的代码创建具名方法或函数。 当调用 提取方法 重构时,PyCharm 会检测所选代码片段的输入变量和输出变量。 检测到的输出变量将用作提取的方法或函数的返回值。

示例 1:从另一个方法内部的表达式中提取全局方法

在此示例中,全局方法 NewMethod() 是从 let c = a + b; 表达式中提取出来的。 提取的方法的参数从 let c = a + b; 表达式中获取。

示例 1.1:生成函数声明

function MyFunction(a : number, b : number) { let c = a + b; let d = c * c; return d; }
function NewMethod(a: number, b: number) { let c = a + b; return c; } function MyFunction(a : number, b : number) { let c = NewMethod(a, b); let d = c * c; return d; }

示例 1.2:在表达式内声明提取的函数

function MyFunction(a : number, b : number) { let c = a + b; let d = c * c; return d; }
let NewMethod = function (a: number, b: number) { let c = a + b; return c; }; function MyFunction(a : number, b : number) { let c = NewMethod(a, b); let d = c * c; return d; }

示例 2:提取在封闭方法内声明的方法

在此示例中,方法 NewMethod() 是从 let c = a + b; 表达式中提取出来的。 已选择目标作用域 function MyFunction。

function MyFunction(a : number, b : number) { let c = a + b; let d = c * c; return d; }
function MyFunction(a : number, b : number) { let NewMethod = function () { let c = a + b; return c; }; let c = NewMethod(); let d = c * c; return d; }

示例 3:从任何方法之外的表达式中提取方法

方法 NewMethod() 是从任何方法之外的 var e = MyFunction(4, 6); 表达式中提取出来的。 提取的方法是全局作用域的。

var e = MyFunction(4, 6);
let NewMethod = function () { var e = MyFunction(4, 6); }; NewMethod();

提取函数

  1. 在编辑器中,选择要转换为函数的代码片段,然后按 Ctrl+Alt+M ,或从上下文菜单中选择 重构 | 提取方法。

    或者,执行以下任一操作:

    • 按 Ctrl+Alt+Shift+T 并选择 提取方法。

    • 转到 重构 | 提取 | 方法。

  2. 如果所选表达式位于另一个函数内部,请从列表中选择目标作用域:

    ws_ts_extract_method_choose_scope.png
    • 如果选择 全局 ,提取的函数将在任何函数之外声明,参见 示例 1。

    • 要在当前封闭函数内声明提取的函数,请选择 function <current enclosing function name> ,参见 示例 2。

  3. 若要打开具有更多选项的 提取函数提取函数 对话框,请再次按 Ctrl+Alt+M。 在对话框中,您可以选择提取的函数是通过生成的 函数声明 声明,还是 在表达式内 声明,并配置要作为参数传递的变量集合。 参见 上文示例。

    ws_ts_extract_method_dialog.png

默认打开提取函数对话框

  • 打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器 | 代码编辑 ,并在 重构 区域选择 在模态对话框中 选项。

提取类型别名

使用此重构将类型声明表达式转换为 类型别名 ,并将该表达式的所有出现替换为此别名。

ws_ts_type_alias_to_interface.png

假设您有以下代码片段,其中包含一个 { z: number } 类型声明:

function returnsObj(): { x : number, y : {z : number} } { return null } function anotherObjectReturned(): {x : number, y : {z : number} } { return null }

在下面的示例中,从 { z: number } 类型声明中提取了类型别名 MyNewAlias:

type MyNewAlias = { z : number }; function returnsObj(): { x : number, y : MyNewAlias } { return null } function anotherObjectReturned(): { x : number, y : MyNewAlias } { return null }

提取类型别名

  1. 在编辑器中,将插入符号置于您想用类型别名替换的表达式内,并从上下文菜单中选择 重构 | 提类型别名 ,或从主菜单中选择 重构 | 提取 | 类型别名。

  2. 如果在当前插入符号位置检测到多个表达式,请从 表达式 列表中选择所需的表达式。

    ws_ts_extract_type_alias_select_type_declaration_expression.png
  3. 如果找到所选表达式的多个出现,请在 找到多个出现位置 列表中选择 仅替换此处 或 替换所有出现位置。

    ws_ts_extract_type_alias_multiple_occurrences.png
  4. 在字段中键入类型别名的名称,准备就绪后,按 Enter。

    ws_ts_extract_type_alias_specify_name.png

提取超类

提取超类 重构会基于当前类的成员创建一个新的抽象类。 创建的抽象类会自动被继承。

假设您有一个类 AccountingDepartment ,并希望其中的 printName() 方法会被复用。

class AccountingDepartment { name: string; printName(): void { console.log("Department name: " + this.name); } printMeeting(): void { console.log("The Accounting Department meets each Monday at 10 a.m"); } generateReports(): void { console.log("Generating accounting reports..."); } }

您可以提取一个超类 Department ,并将 printName 以及 Name 字段包含在其中。

class Department { name: string; printName(): void { console.log("Department name: " + this.name); } } class AccountingDepartment extends Department { printMeeting(): void { console.log("The Accounting Department meets each Monday at 10 a.m"); } generateReports(): void { console.log("Generating accounting reports..."); } }

提取超类

  1. 将插入符号置于您要提取超类的类中的任意位置。

  2. 从主菜单中选择 重构 | 提取 | 超类 ,或从上下文菜单中选择 重构 | 提取超类。 将打开 提取超类 对话框。

  3. 指定新超类的名称,并选中您要包含到其中的类成员旁边的复选框。

  4. 在 目标文件 字段中,指定新类所在文件的位置。 默认情况下,该字段会显示调用重构的当前文件路径。

  5. 选择 提取超类。 PyCharm 创建一个新类,并用 extends 标记源类。

    要创建一个超类,并在方法的参数中将对源类的引用替换为对该超类的引用,请选择 提取超类并在可能的情况下使用。 PyCharm 会在 查找 工具窗口的 重构预览 窗格中显示建议的更改。

提取接口

提取接口 重构会基于当前类的成员创建一个新的接口。 创建的接口会自动被实现。

假设您有一个类 AccountingDepartment ,并预计其中的 generateReports() 方法将会有其他实现。

abstract class Department { constructor(public name: string) { } printName(): void { console.log("Department name: " + this.name); } } class AccountingDepartment extends Department { constructor() { super("Accounting and Auditing"); } printMeeting(): void { console.log("The Accounting Department meets each Monday at 10 a.m"); } generateReports(): void { console.log("Generating accounting reports..."); } }

您可以提取一个 DepartmentInterface 接口,并将 generateReports() 包含在其中。

abstract class Department { constructor(public name: string) { } printName(): void { console.log("Department name: " + this.name); } } interface DepartmentInterface { generateReports(): void; } class AccountingDepartment extends Department implements DepartmentInterface { constructor() { super("Accounting and Auditing"); } printMeeting(): void { console.log("The Accounting Department meets each Monday at 10 a.m"); } generateReports(): void { console.log("Generating accounting reports..."); } }

提取接口

  1. 将插入符号置于您要提取接口的类中的任意位置。

  2. 从主菜单中选择 重构 | 提取 | 接口 ,或从上下文菜单中选择 重构 | 提取接口。 将打开 提取接口 对话框。

  3. 指定新接口的名称,并选中您要包含到其中的类成员旁边的复选框。

  4. 在 目标文件 字段中,指定新接口所在文件的位置。 默认情况下,该字段会显示调用重构的当前文件路径。

  5. 选择 提取接口。 PyCharm 创建一个新接口,并将源类标记为其实现。

    要创建一个接口,并在方法的参数中将对源类的引用替换为对该接口的引用,请选择 提取接口并在可能的情况下使用。 PyCharm 会在 查找 工具窗口的 重构预览 窗格中显示建议的更改。

引入对象或数组解构

解构可让您轻松将数组和对象中的值解包到变量中。 该功能具有非常简洁的语法,通常在需要在应用中传递数据时使用。 有关更多信息,请参阅 TypeScript 官方网站。

在 PyCharm 中,您可以使用意图操作 Alt+Enter 调用解构。 使用 替换为对象/数组解构 操作,原始赋值将被移除。 若要保留原始赋值,请使用 引入对象/数组解构。

替换原始赋值

  1. 将插入符号置于数组或对象中的值处,然后按 Alt+Enter。

  2. 从列表中选择 替换为对象解构 或 替换为数组解构。

    通过意图操作进行解构:替换为数组解构

    如果数组或对象中的某些值未被使用,这些元素将被跳过:

    通过意图操作进行解构:已跳过的项

保留原始赋值

  1. 将插入符号置于数组或对象中的值处,然后按 Alt+Enter。

  2. 从列表中选择 引入对象解构 或 引入数组解构。

    通过意图操作进行解构:引入数组解构

为函数生成解构参数

  1. 将插入符号置于函数的参数处,然后按 Alt+Enter。

  2. 从列表中选择 将参数转换为对象。

    通过意图操作进行解构:将参数转换为对象

内联重构

内联重构与 提取重构 相反。

示例 1:内联变量

内联变量 重构会用其初始值设定项替换变量或常量的冗余用法。 此类重构仅适用于块级作用域变量和函数作用域变量。

function Multiplication(a : number, b : number) { let c = a + b; let d = (c) * (c); return d; }
function Multiplication(a : number, b : number) { let d = ((a + b)) * ((a + b)); return d; }

示例 2:内联方法

内联方法/内联函数 重构会将方法或函数的函数体放入其调用方的函数体中;该方法/函数本身将被删除。

在下面的示例中, Sum() 的函数体被放入 Multiplication() 的函数体中。

function Sum(a: number, b: number) { return a + b; } function Multiplication(a: number, b: number) { let d = Sum(a, b) * Sum(a, b); return d; } var e = Multiplication(4, 6);
function Multiplication(a : number, b : number) { let d = (a + b) * (a + b); return d; } var e = Multiplication(4, 6);

运行内联重构

  1. 在编辑器中,将插入符号置于要内联的符号处,然后按 Ctrl+Alt+N ,或从上下文菜单或主菜单中选择 重构 | 内联。

  2. 在与所选符号对应的 内联 对话框中,确认内联重构。

    ws_ts_extract_variable.png

更改签名重构

使用 Change Signature 重构,更改函数名称、可见性和返回类型,添加、删除、重新排序并重命名参数,并沿调用层次结构传播新参数。

您还可以使用 引入参数 重构来添加参数。

在下面的示例中,函数 eat() 被重命名为 feed() ,并引入了一个新的 boolean 参数 isMammal。

class Animal { constructor(age: number, name: string){ } eat(food: string[]): void { } } let Max = new Animal(23, 'Max'); Max.eat(['Apple', 'Parsley']); let Daisy = new Animal(12, 'Daisy'); Daisy.eat(['Pork', 'Fish']);
class Animal { constructor(age: number, name: string){ } feed(food: string[], isMammal: boolean = true): void { } } let Max = new Animal(23, 'Max'); Max.feed(['Apple', 'Parsley'], false); let Daisy = new Animal(12, 'Daisy'); Daisy.feed(['Pork', 'Fish'], false);

调用更改签名

  • 在编辑器中,将插入符号置于要重构的函数名称内,然后按 Ctrl+F6 ,或从上下文菜单或主菜单中选择 重构 | 更改签名。 将打开 更改签名 对话框。

重命名函数

  • 在 更改签名 对话框 Ctrl+F6 ,编辑 名称 字段。

更改函数的返回类型

  • 在 返回类型 字段中,指定函数返回值的类型。 如果该字段为空,返回类型被视为 void。 了解有关返回类型的更多信息,请参阅 TypeScript 官方网站。

更改函数的可见性

管理函数参数

  • 在 更改签名 对话框 Ctrl+F6 ,使用参数表及其右侧的按钮:

    • 要添加参数,请点击 添加按钮 &#xa0; Alt+Insert ,并指定新参数的名称及其类型。 指定参数的默认值,或通过函数调用传递的值。

      如有必要, 传播新参数 到调用当前函数的函数。

    • 要删除参数,请点击相应行中的任意单元格,然后点击 删除按钮 &#xa0; Alt+Delete。

    • 要重新排序参数,使必需参数列在可选参数之前,请使用 上移按钮 &#xa0; Alt+Up 和 下移按钮 &#xa0; Alt+Down。 了解有关必需参数和可选参数的更多信息,请参阅 TypeScript 官方网站。

    • 要重命名参数,请编辑 名称 字段。

沿调用层次结构传播参数

  1. 在 更改签名 对话框 Ctrl+F6 ,选择参数并点击 传播按钮。 将打开 选择要传播新参数的方法 对话框。 左侧窗格显示函数调用的层次结构。 当您选择某个函数时,右侧窗格会在 调用方方法 和 被调用方方法 字段中分别显示该函数的代码以及其调用的函数的代码。

  2. 在左侧窗格中,选中您要传播参数的函数旁边的复选框,然后点击 确定。

预览更改并完成重构

  1. 在 更改签名 对话框 Ctrl+F6 ,点击 预览。

  2. 在 查找工具窗口 的 重构预览 选项卡中, 查看预期更改 ,进行必要的调整,然后在准备就绪时点击 执行重构。

将默认导出转换为命名导出

对于类、函数、常量变量、字符串、对象和类型,您可以将 export default 语句替换为命名 export 语句,并相应更新对应的 import 语句。

如果某个符号被再导出,相应的 export 语句也会更新。

该重构可从 export default 和 import 语句中调用。

  • 将插入符号置于 export default 语句处或您正在导出的名称处,按 Alt+Enter ,并选择 将默认导出转换为命名导出。 要切换预览,请按 Ctrl+Q。

    从 export 语句调用默认导出转换
  • 在 import 语句中,将插入符号置于导入内容的名称处,按 Alt+Enter ,并选择 将默认导出转换为命名导出。 预览(Ctrl+Q )显示将如何更新 import 语句。

    从 import 语句调用默认导出转换

将命名导出转换为默认导出

对于类、函数、常量变量、字符串、对象和类型,您可以将命名 export 语句替换为 export default 语句,并相应更新对应的 import 语句。

该重构可从 export default 和 import 语句中调用。

  • 在 export 语句中,将插入符号置于您正在导出的名称处,按 Alt+Enter ,并选择 将命名导出转换为默认导出。 要切换预览,请按 Ctrl+Q。

    在 export 语句中将命名导出转换为默认导出
  • 在 import 语句中,将插入符号置于导入内容的名称处,按 Alt+Enter ,并选择 将命名导出转换为默认导出。 预览(Ctrl+Q )显示将如何更新 import 语句。

    在 export 语句中将命名导出转换为默认导出
最后修改日期: 2025年 12月 2日