重构 TypeScript

重构是指在不改变应用行为的前提下更新源代码。重构有助于保持代码的健壮、干净且易于维护。

移动重构

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

移动类、函数或变量

选择要移动的符号。
按下 F6 或从主菜单或所选内容的上下文菜单中选择重构 | 移动。或者，选择重构 | 此处重构或按下 Ctrl+Alt+Shift+T ，然后从列表中选择移动。
将打开移动模块成员对话框。
指定目标文件并选择要移动的成员。
默认情况下，WebStorm 会自动将成员的可见性提升到所需级别。如果您希望保持可见性级别不变，请在可见性中点击按原样。

上移类成员重构

向上提取类成员重构将类方法向类层级结构中上移，从当前类移至其父类或其实现的接口中。

假设您有一个类 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...");
    }
}
            
  

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

将光标置于要向上提取成员的类体中任意位置。
从主菜单或上下文菜单中选择重构 | 上移成员。将打开上移成员对话框。
在列表中选择要移动方法的父类或接口。
要向上提取方法，请在要上移的成员列表中勾选其前的复选框。如有需要，在待移动方法前勾选设为抽象复选框。

重命名重构

除了重命名文件与文件夹之外（在任何语言上下文中均可用），您还可以重命名类、方法、变量、参数与字段。 WebStorm 会在符号声明及默认在当前项目中所有用法中更改名称。

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

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

在编辑器中选择要重命名的类、方法、变量或字段，按 Shift+F6 或从上下文菜单选择重命名。
在画布字段中指定符号的新名称。输入名称或从列表中选择合适的名称。
可选：
点击高亮符号旁的，打开同时重命名于弹窗，并勾选在注释与字符串中搜索和搜索文本出现位置复选框，以重命名注释、字符串字面量及文本中的符号用法。
当重命名参数时，同时重命名于弹窗与不可用。要指定其他选项，请再次打开重命名对话框 Shift+F6。
可选：
要打开具有更多选项的重命名对话框，请再次按 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); }
为避免错误重命名，请预览更改后再应用。
默认情况下，在重构预览工具窗口中，符号的所有动态用法均标记为已排除并分组在指向 <symbol> 的代码中动态引用节点下。要对某个用法应用重构，请在其上下文菜单中选择包含。

保持类名与包含文件名一致

当您重命名类时，WebStorm 还会建议重命名文件（如果文件与类同名）。如果接受该建议，WebStorm 将更新其他文件中导入语句中的此文件名称。

如果您拒绝该建议，仍可稍后随时使用重命名文件... 意图操作来重命名该文件。如果您刚创建了一个新文件，而在开始输入类或接口时想到了更好的名称，则此方式非常有用。

另一个意图操作建议将类移动到名称相应的新文件中。建议文件名的格式由文件命名约定列表中所选风格决定，该列表位于代码样式：JavaScript 页面。

保持文件名与相应类名一致

将光标置于类名上并按 Alt+Enter。
从意图列表中选择将文件重命名为 <class_name.ts> 以与类名保持一致或将类 <class_name> 移动到文件 <class_name.ts>。

提取／引入重构

WebStorm 提供多种提取重构方式，用于引入参数、变量、常量、字段、方法和函数。要运行这些重构中的任意一种，请选择要重构的表达式并选择重构 | <target>。您可以选择整个表达式，也可以将光标放在表达式中，WebStorm 将辅助您完成选择。

引入参数

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

假设您在函数 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, ");

引入参数

在编辑器中，将光标放在要转换为参数的表达式内并按 Ctrl+Alt+P ，或从上下文菜单中选择重构 | 引入参数。
或者，执行下列任一操作：
- 按 Ctrl+Alt+Shift+T 并选择引入参数。
- 转到重构 | 提取 | 参数。
如果在当前光标位置检测到多个表达式，请在表达式列表中选择所需表达式。
如果找到多个所选表达式的实例，请在发现多个出现位置列表中选择仅替换此处出现或替换全部出现位置。最终将显示用于配置重构的弹出窗口。
选中生成 JSDoc 以生成 JSDoc注释块。如果您需要指定自定义的默认参数值，此功能可能会很有帮助。
选择新参数的初始化位置，并在适用时指定其默认值：
- 如果选中可选参数复选框，参数将在函数体中使用默认值进行初始化。
- 如果取消选中可选参数复选框，默认参数值将通过现有函数调用进行传递。所有函数调用将根据新的函数签名进行更改，并且函数体中将添加参数初始化代码。
初始情况下，WebStorm 会将执行重构的位置中的表达式作为默认值。在大多数情况下，您无需更改该值。如仍需指定，请在 JSDoc 注释中按照以下格式指定默认值： @param <parameter name> - <default value>。
请访问 TypeScript 官方网站，进一步了解可选参数与默认参数。
通过在列表中双击某个建议的参数名称来接受该名称，或者在红色背景的字段中指定自定义名称。准备就绪后按下 Enter。

选择重构模式

您可以直接在编辑器中（即即时模式）按上述方式提取参数，或使用引入参数对话框。这两种方式非常相似，其区别如下：

预览重构结果。
在对话框中，您可以单击预览，并在查找工具窗口的专用选项卡中查看预期更改。即时模式下该功能不可用。
指定默认参数值。
在对话框中，WebStorm 会在值字段中建议默认参数值，您可以接受建议或另行指定其他值。在即时模式下，WebStorm 会将调用重构所在的表达式视为默认参数值。如需指定其他值，需要使用 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);

                        
     

引入变量

在编辑器中选择要转换为变量的表达式，然后按 Ctrl+Alt+V 并从上下文菜单中选择重构 | 引入变量。
或者，执行以下某项操作：
- 按 Ctrl+Alt+Shift+T 并选择引入变量。
- 转到重构 | 提取 | 变量。
如果在当前光标位置检测到多个表达式，请从表达式列表中选择所需项。
如果发现所选表达式出现多次，请从发现多个出现位置列表中选择仅替换此处出现或替换全部出现位置。
最后会出现用于配置重构的弹出窗口。
请从列表中选择用于声明新变量的语句：
- 选择 var 引入函数作用域变量。此变量可以在封闭函数内或不在任何函数中声明。
- 选择 let 引入块级作用域变量。
- 选择 const 引入块级作用域常量。
通过在列表中双击某个建议的参数名称来接受该名称，或者在红色背景的字段中指定自定义名称。准备就绪后按下 Enter。

选择重构模式

您可以直接在编辑器中（即即时模式）按上述方式提取变量，或使用引入变量对话框。默认情况下，WebStorm 会以即时模式运行引入变量重构。如需使用提取变量对话框，请打开设置对话框（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 {...}

引入常量

在编辑器中选择要转换为常量的表达式，然后按 Ctrl+Alt+C ，或从上下文菜单中选择重构 | 引入常量。
或者，执行以下某项操作：
- 按 Ctrl+Alt+Shift+T 并选择引入常量。
- 转到重构 | 提取 | 常量。
如果在当前光标位置检测到多个表达式，请从表达式列表中选择所需项。
选择新常量的作用域：
- 局部常量将声明在封闭方法内，参阅示例 1。
- 类字段将声明在当前类中，参阅示例 2。
- 全局或模块常量将在任何类之外声明，参见示例 3。
如果 WebStorm 检测到该表达式的多个实例，请选择是否要替换全部，或仅替换触发重构的那一处。
通过双击列表中的名称接受建议的参数名之一，或在红色画布字段中指定自定义名称。准备就绪时按 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;
    }
}
                
   

引入字段

在编辑器中，选择要转换为常量的表达式，并按 Ctrl+Alt+F ，或从上下文菜单中选择重构 | 引入字段。
或者，执行以下操作之一：
- 按 Ctrl+Alt+Shift+T 并选择引入字段。
- 转到重构 | 提取 | 字段。
如果 WebStorm 检测到该表达式的多个实例，请选择是否要替换全部，或仅替换触发重构的那一处。
在弹出窗口中，选择新字段的初始化位置：
- 当前方法，参见示例 1。
- 字段声明，参见示例 2。
- 构造函数，参见示例 3。请注意，如果从字段初始值设定项中调用重构，则该选项将被禁用。
当在字段声明或构造函数中初始化时，新字段可以使用 readonly 修饰符进行引入。为此，请选择设为 readonly 复选框。
选择字段可见性，可用选项有公开、私有和受保护。有关字段可见性修饰符的详细信息，请参阅 TypeScript 官方网站
通过双击列表中的名称接受建议的参数名之一，或在红色画布字段中指定自定义名称。准备就绪时按 Enter。

选择重构模式

默认情况下，WebStorm 会直接在编辑器中（以就地模式）运行引入字段重构，如上所述。

要使用提取字段对话框，请打开设置对话框（Ctrl+Alt+S ），转到编辑器 | 代码编辑，然后在重构区域中选择在模态对话框中选项。

提取方法

提取方法重构允许您使用提取的代码创建一个命名的方法或函数。调用提取方法重构时，WebStorm 会检测选定代码片段的输入变量，以及作为输出的变量。检测到的输出变量将作为提取出的方法或函数的返回值使用。

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

在此示例中，从 let c = a + b; 表达式中提取了一个具有全局作用域的方法 NewMethod()。提取方法的参数来自 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：提取的方法声明在封闭方法内

在此示例中，从 let c = a + b; 表达式中提取了一个方法 NewMethod()。选择的目标作用域为 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：从不属于任何方法的表达式中提取方法

从不属于任何方法的 var e = MyFunction(4, 6); 表达式中提取了方法 NewMethod()。提取的方法具有全局作用域。

var e = MyFunction(4, 6);

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

提取函数

在编辑器中，选择一个要转换为函数的代码片段，然后按 Ctrl+Alt+M ，或从上下文菜单中选择重构 | 提取方法。
或者，执行以下操作之一：
- 按 Ctrl+Alt+Shift+T 并选择提取方法。
- 转到重构 | 提取 | 方法。
所选的代码片段不一定是语句集合。它也可以是代码中使用的某个表达式。
如果所选表达式位于另一个函数内，请从列表中选择目标作用域：
- 如果选择全局，则提取的函数将在所有函数之外声明，参见上方的示例 1。
- 若要在当前封闭函数中声明提取的函数，请选择函数 <current enclosing function name> ，参见上方的示例 2。
若要打开包含更多选项的 Extract Function提取函数对话框，请再次按 Ctrl+Alt+M。在此对话框中，您可以选择是通过生成的函数声明来声明提取的函数，还是在表达式中声明，并配置要作为参数传递的变量集合。请参阅上方示例。

默认打开“提取函数”对话框

打开设置对话框（Ctrl+Alt+S ），转到编辑器 | 代码编辑，然后在重构区域中选择在模态对话框中选项。

提取类型别名

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

假设您有以下包含 { 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
}
                        
   

提取类型别名

在编辑器中，将插入符号放置在要替换为类型别名的表达式中，然后从上下文菜单中选择重构 | 提取类型别名，或从主菜单中选择重构 | 提取 | 类型别名。
如果当前插入符号位置检测到多个表达式，请从表达式列表中选择所需的表达式。
如果找到多个选中的表达式实例，请从已发现多个项列表中选择仅替换此项或替换所有项。
在字段中输入类型别名的名称，然后在准备好后按 Enter。

提取超类

提取超类重构基于当前类的成员创建一个新的抽象类。创建的抽象类将自动扩展。

假设您有一个类 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...");
    }
}
                
   

提取超类

将插入符号置于您想要提取超类的类的任意位置。
从主菜单选择重构 | 提取 | 超类或从上下文菜单选择重构 | 提取超类。将打开提取超类对话框。
指定新超类的名称，并选中您希望包含在其中的类成员旁边的复选框。
在目标文件字段中，指定新类所在的文件位置。默认情况下，字段中显示的是调用重构的当前文件路径。
选择提取超类。 WebStorm 会创建一个新类，并使用 extends 标记源类。
要创建一个超类，并在方法参数中将对源类的引用替换为对该超类的引用，请选择提取超类并在可能的地方使用。 WebStorm 会在重构预览选项卡的查找工具窗口中显示建议的更改。

提取接口

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

假设您有一个类 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...");
    }
}
                
   

提取接口

将插入符号置于您想要提取接口的类的任意位置。
从主菜单选择重构 | 提取 | 接口或从上下文菜单选择重构 | 提取接口。将打开提取接口对话框。
指定新接口的名称，并选中您希望包含在其中的类成员旁边的复选框。
在目标文件字段中，指定新接口所在的文件位置。默认情况下，字段中显示的是调用重构的当前文件路径。
选择提取接口。 WebStorm 会创建一个新接口，并将源类标记为该接口的实现。
要创建接口并在方法参数中将对源类的引用替换为对接口的引用，请选择提取接口并在可能的地方使用。 WebStorm 会在重构预览选项卡的查找工具窗口中显示建议的更改。
如果某个实例引用了接口中未定义的方法或字段，WebStorm 将不会建议进行替换。

引入对象或数组解构

解构让您可以轻松地从数组和对象中将值解包到变量中。此功能语法简洁，通常在应用中传递数据时使用。如需了解更多信息，请参阅 TypeScript 官方网站。

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

替换原始赋值

将插入符号放到数组或对象的值上，然后按 Alt+Enter。
从列表中选择替换为对象解构或替换为数组解构。
如果数组或对象中的某些值未被使用，这些元素将被跳过：

保留原始赋值

将插入符号放到数组或对象的值上，然后按 Alt+Enter。
从列表中选择引入对象解构或引入数组解构。

为函数生成解构参数

将插入符号放在函数参数上，然后按 Alt+Enter。
从列表中选择将参数转换为对象。

内联重构

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

示例 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);

运行内联重构

在编辑器中，将插入符号放置到要内联的符号处，按下 Ctrl+Alt+N ，或从上下文菜单或主菜单中选择重构 | 内联。
在与所选符号对应的内联对话框中，确认执行内联重构。

更改签名重构

使用变更签名重构可以更改函数名称、可见性和返回类型，添加、删除、重新排序和重命名参数，并通过调用层次结构传播新参数。

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

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

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 官方网站获取有关返回类型的更多信息。

更改函数的可见性

在可见性列表中，选择一个函数修饰符，可用选项包括： public（默认）、 private和 protected。

管理函数参数

在更改签名对话框 Ctrl+F6 中，使用参数表及其右侧的按钮：
- 要添加参数，请点击 Alt+Insert ，并指定新参数的名称和类型。请指定参数的默认值，或在函数调用时传递的值。
  如有需要，将新参数传播到调用当前函数的其他函数中。
- 要删除参数，请点击相应行中的任意单元格，然后点击 Alt+Delete。
- 要重新排列参数，使必需参数在可选参数之前，请使用 Alt+Up 和 Alt+Down。可在 TypeScript 官方网站了解有关必需参数和可选参数的更多信息。
- 要重命名参数，请编辑名称字段。

沿调用层级传播参数

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

预览更改并完成重构

在更改签名对话框 Ctrl+F6 中，点击预览。
在重构预览选项卡的查找工具窗口中，查看预期更改，进行必要调整后点击执行重构。

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

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

如果符号被重新导出，相应的 export 语句也会被更新。

可从 export default 和 import 语句中均可调用此重构操作。

将插入符号置于 export default 语句内或所导出内容的名称处，按下 Alt+Enter ，然后选择将默认导出转换为具名导出。若要切换预览，请按 Ctrl+Q。
在 import 语句内部，将插入符号放在被导入内容的名称处，然后按下 Alt+Enter 并选择将默认导出转换为具名导出。预览（Ctrl+Q ）将显示 import 语句将如何更新。

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

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

可从 export default 和 import 语句中均可调用此重构操作。

将插入符号置于 export 语句内所导出内容的名称处，按下 Alt+Enter ，然后选择将具名导出转换为默认导出。要切换预览，请按 Ctrl+Q。
在 import 语句中，将插入符号置于所导入内容的名称上，按 Alt+Enter ，然后选择将具名导出转换为默认导出。预览（Ctrl+Q ）将显示 import 语句将如何更新。

最后修改日期： 2025年 9月 26日