# 重构 TypeScript

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 必需插件  :
>
>
>
> `JavaScript 和 TypeScript` ：该插件与 IntelliJ IDEA 一起捆绑，并默认启用。

[重构](https://en.wikipedia.org/wiki/Code_refactoring) 是指在不改变应用程序行为的情况下更新源代码。 重构有助于让代码保持稳健、 [避免重复代码](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)，且易于维护。

## 移动重构

除了 [移动文件和文件夹](null)之外，IntelliJ IDEA 还允许您移动 TypeScript 顶级符号。  移动符号重构  适用于 ES6 模块中的类、函数和变量。

Procedure: 移动类、函数或变量

1. 选择要移动的符号。

2. 按 `F6` (Windows), `F6` (macOS), `F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ I` (macOS System Shortcuts), `F6` (XWin), `F6` (GNOME), `F6` (KDE), `F6` (Emacs), `F6` (Sublime Text), `F6` (Sublime Text (macOS)), `Ctrl+R, O` (Visual Studio), `⌘ R, O` (Visual Studio (macOS)), `Ctrl+M` (NetBeans), `Alt+Shift+V` (Eclipse), `⌘ ⌥ V` (Eclipse (macOS)) 或从主菜单或选择的上下文菜单中选择  `重构 | 移动` 。 或者，选择  `重构 | 对此进行重构`  或按 `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS))，然后从列表中选择  `移动` 。

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

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

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

## 向上拉取类成员重构

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

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_refactoring_pull_members_up.mp4)

Procedure: 将类的方法移动到超类或接口

1. 通过执行以下任一操作打开   向上拉取成员  对话框：

* 将文本光标放在要将成员向上拉取的类中的任意位置，然后从主菜单或上下文菜单中选择 `重构 | 上移成员` 。

* 按 `Ctrl+Shift+A` (Windows), `⌘ ⇧ A` (macOS), `⌘ ⇧ A` (IntelliJ IDEA Classic (macOS)), `⌘ ⇧ P` (macOS System Shortcuts), `Ctrl+Shift+A` (XWin), `Ctrl+Shift+A` (GNOME), `Ctrl+Shift+A` (KDE), `Escape, X` (Emacs), `Ctrl+Shift+P` (Sublime Text), `⌘ ⇧ P` (Sublime Text (macOS)), `Ctrl+Shift+A` (Visual Studio), `⌘ ⇧ A` (Visual Studio (macOS)), `Ctrl+I` (NetBeans), `Ctrl+Shift+A` (Eclipse), `⌘ 3` (Eclipse (macOS)) 并搜索 `向上拉取成员` 。

2. 从   向上拉取成员   对话框的列表中，选择要将方法移动到的超类或接口。

3. 要向上拉取某个方法，请在   要上移的成员   列表中选中其旁边的复选框。 如果适用，请选择方法旁边的   设为抽象   复选框。

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

```TYPESCRIPT
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` 。

重构前:

```TYPESCRIPT
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...");
    }
}

```

重构后:

```TYPESCRIPT
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`  接口。

重构前:

```TYPESCRIPT
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...");
    }
}

```

重构后:

```TYPESCRIPT
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...");
    }
}

```

## 重命名重构

除此之外，在任何语言环境中均可使用的 [重命名文件和文件夹](null)功能，您还可以重命名类、方法、变量、参数和字段。 IntelliJ IDEA 会更改符号在其声明中的名称，并默认更改当前项目中的所有用法。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_typescript_rename_method.mp4)

重命名 重构是在原地执行的，但您可以按 `Shift+F6` (Windows), `⇧ F6` (macOS), `⇧ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ R` (macOS System Shortcuts), `Shift+F6` (XWin), `Shift+F6` (GNOME), `Shift+F6` (KDE), `Shift+F6` (Emacs), `Shift+F6` (Sublime Text), `⇧ F6` (Sublime Text (macOS)), `Ctrl+R, R` (Visual Studio), `⌘ R, R` (Visual Studio (macOS)), `Ctrl+R` (NetBeans), `Alt+Shift+R` (Eclipse), `⇧ F6` (Eclipse (macOS)) 来在   重命名   对话框中配置重构范围。

要默认打开对话框，请打开   设置  对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 代码编辑` ，并在   指定重构选项  区域中选择   在模态对话框中  选项。

> **Tip:**
> 在   重命名   对话框中选中   搜索动态引用   复选框后，该对话框将默认打开，直到清除此复选框为止。

Procedure:

1. 在编辑器中，选择要重命名的类、方法、变量或字段，然后按 `Shift+F6` (Windows), `⇧ F6` (macOS), `⇧ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ R` (macOS System Shortcuts), `Shift+F6` (XWin), `Shift+F6` (GNOME), `Shift+F6` (KDE), `Shift+F6` (Emacs), `Shift+F6` (Sublime Text), `⇧ F6` (Sublime Text (macOS)), `Ctrl+R, R` (Visual Studio), `⌘ R, R` (Visual Studio (macOS)), `Ctrl+R` (NetBeans), `Alt+Shift+R` (Eclipse), `⇧ F6` (Eclipse (macOS)) 或从上下文菜单中选择  `重命名` 。

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

3. 可选：

点击 ![注释和字符串中的重命名图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.inlayRenameInComments.svg) ![文本匹配项中的重命名图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.inlayRenameInNoCodeFiles.svg)旁边的高亮符号以打开   同时在以下位置重命名  弹出窗口，并选中   在注释和字符串中搜索  和   搜索文本出现位置  复选框以重命名该符号在注释、字符串文本和文本中的用法。

> **Tip:**
> 当您重命名参数时，   同时在以下位置重命名   弹出窗口和 ![注释和字符串中的重命名图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.inlayRenameInComments.svg) ![文本匹配项中的重命名图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.inlayRenameInNoCodeFiles.svg) 不可用。 如需指定其他选项，请再次打开   重命名   对话框 `Shift+F6` (Windows), `⇧ F6` (macOS), `⇧ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ R` (macOS System Shortcuts), `Shift+F6` (XWin), `Shift+F6` (GNOME), `Shift+F6` (KDE), `Shift+F6` (Emacs), `Shift+F6` (Sublime Text), `⇧ F6` (Sublime Text (macOS)), `Ctrl+R, R` (Visual Studio), `⌘ R, R` (Visual Studio (macOS)), `Ctrl+R` (NetBeans), `Alt+Shift+R` (Eclipse), `⇧ F6` (Eclipse (macOS))。

4. 可选：

要打开   重命名  对话框查看更多选项，请再次按 `Shift+F6` (Windows), `⇧ F6` (macOS), `⇧ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ R` (macOS System Shortcuts), `Shift+F6` (XWin), `Shift+F6` (GNOME), `Shift+F6` (KDE), `Shift+F6` (Emacs), `Shift+F6` (Sublime Text), `⇧ F6` (Sublime Text (macOS)), `Ctrl+R, R` (Visual Studio), `⌘ R, R` (Visual Studio (macOS)), `Ctrl+R` (NetBeans), `Alt+Shift+R` (Eclipse), `⇧ F6` (Eclipse (macOS))。

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

* 选中 搜索文本出现位置 复选框，可以重命名项目中 HTML 和其他文件中的匹配符号。

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

* 选中 搜索动态引用 复选框以重命名符号的动态用法。 > **Tip:** > 如果选中 搜索动态引用 复选框，对话框将默认打开，直到您清除它。 请注意，包括动态用法的重构可能会导致如下面示例中所示的错误重命名。 这里 `target` 在 `console.log(e.target)` 里可以更改为 `myTarget` ，因为 `e` 的类型是 `any` ，这意味着它也可以是 `myInt` 。 重命名前: ```TYPESCRIPT interface myInt { target: string } function onClick(e: any) { console.log(e.target); } ``` 已重命名的动态用法: ```TYPESCRIPT interface myInt { myTarget: string } function onClick(e: any) { console.log(e.myTarget); } ```

5. 为避免错误重命名，请在应用更改之前 [预览这些更改](null)。

* 要显示符号的动态用法，请按 ![显示动态用法切换按钮](https://resources.jetbrains.com/help/img/idea/2026.3/ws_find_usages_show_dynamic_usages.png)

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

![重构预览：符号的动态用法标记为排除在重构之外](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_rename_symbol_dynamic_usages_preview_include.png)

### 保持类名和所含文件一致性

重命名类时，如果文件具有相同名称，IntelliJ IDEA 也会建议重命名该文件。 如果接受该建议，IntelliJ IDEA 会在其他文件的 import 语句中更新此文件的名称。

如果拒绝此建议，之后可以随时使用   重命名文件…   意图操作重命名该文件。 如果刚刚创建了一个新文件，但在其中开始键入类或接口时又想出了更好的名称，此操作会很有用。

另一项意图操作会建议将类移动到具有相应名称的新文件中。 建议文件名的格式由   文件名约定  列表中选择的样式决定，可在 [代码样式：JavaScript](null)页面上找到。

Procedure: 将文件名称与对应类的名称保持一致

1. 将文本光标放置在类名处并按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))。

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

![将类移动到文件中并保持名称一致](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_refactoring_rename_file_intention_custom_naming_convention.png)

## 提取/引入重构

IntelliJ IDEA 提供多种  提取  重构操作，用于引入形参、变量、常量、字段、方法和函数／方法。 要运行这些重构操作中的任意一个，请选择要重构的表达式，然后选择  `重构 | <target>` 。 可以选择整个表达式，或者将文本光标放在表达式内的任意位置，IntelliJ IDEA 会帮助完成选择。

### 引入形参

使用  引入形参  重构将函数／方法调用中的表达式替换为形参。 IntelliJ IDEA 将相应更新函数／方法的声明及其调用。 新形参的默认值可以在函数／方法主体内初始化，或通过函数／方法调用传递。

假设您有一段代码，其中在函数  `"您好，"` 中硬编码了  `greeter()` 。

```TYPESCRIPT
function greeter(firstName : String, lastName : String) {
    return "Hello, " + firstName + " " + lastName;
}

document.body.innerHTML = greeter("Jane","User");
                    
```

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

示例 1：提取一个可选参数

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

```TYPESCRIPT
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);`  随之更改。

```TYPESCRIPT
function greeter(firstName : String, lastName : String, greeting: string) {
    return greeting + firstName + " " + lastName;
}

document.body.innerHTML = greeter("Jane", "User", "Hello, ");
                            
```

Procedure: 引入参数

1. 在编辑器中，将文本光标放在要转换为形参的表达式内，然后按 `Ctrl+Alt+P` (Windows), `⌘ ⌥ P` (macOS), `⌘ ⌥ P` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ P` (macOS System Shortcuts), `Ctrl+Alt+P` (XWin), `Ctrl+Alt+P` (GNOME), `Ctrl+Alt+P` (KDE), `Ctrl+Alt+P` (Emacs), `Ctrl+Alt+P` (Sublime Text), `⌘ ⌥ P` (Sublime Text (macOS)), `Ctrl+R, P` (Visual Studio), `⌘ R, P` (Visual Studio (macOS)), `Ctrl+Alt+P` (NetBeans), `Ctrl+Alt+P` (Eclipse), `⌘ ⌥ P` (Eclipse (macOS))，或从上下文菜单中选择  `重构 | 引入参数` 。

![调用引入形参重构](https://resources.jetbrains.com/help/img/idea/2026.3/typescript_extract_parameter_inplace_refactoring_invoke.png)

或者，执行以下操作之一：

* 按 `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS))并选择 `引入形参` 。

* 前往 `重构 | 提取/引入 | 形参` 。

2. 如果在当前文本光标位置检测到多个表达式，请从   表达式   列表中选择所需的表达式。

![引入参数：选择一个表达式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_extract_parameter_select_expression.png)

3. 如果找到所选表达式的多个出现位置，请从   找到多个出现位置   列表中选择   仅替换此处   或   替换所有出现位置  。 最后，会显示用于配置重构的弹出窗口。

![引入参数弹出窗口](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_extract_parameter_specify_parameter_name_and_type.png)

4. 选择   生成 JSDoc   以生成 [JSDoc](https://github.com/jsdoc/jsdoc) 注释块。 如果需要指定自定义默认形参值，这可能会有所帮助。

5. 选择新参数将在何处初始化，并指定其默认值（如果适用）：

* 如果选中 可选形参 复选框，形参将在函数／方法主体中使用默认值进行初始化。

* 如果清除 可选形参 复选框，默认形参值将通过现有函数／方法调用传递。 所有函数／方法调用都将根据新的函数／方法签名进行更改，并且会在函数／方法主体中添加形参初始化。

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

了解更多有关可选参数和默认参数的信息，请访问 [TypeScript official website](https://www.typescriptlang.org/docs/handbook/functions.html#optional-and-default-parameters)。

6. 在列表中双击建议的形参名称之一以接受它，或在带画布的字段中指定自定义名称。 按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) 准备。

![引入参数：result](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_extract_parameter_result.png)

#### 选择重构模式

您可以在编辑器中（就地模式）提取参数 [如上所述](#typescript_extract_parameter_inplace_refactoring)或使用   引入参数对话框  。 这两种方法非常相似，区别如下：

* [预览重构结果](null)。 在对话框中，可以点击 预览 ，并在 查找 工具窗口的专用选项卡中检查预期更改。 在就地模式下，此功能不可用。

* [指定默认参数值](#typescript_extract_parameter_inplace_optional_required_default_value)。 在对话框中，IntelliJ IDEA 会在 值 字段中建议默认形参值，可以接受该建议或指定其他值。 在就地模式下，IntelliJ IDEA 将调用重构的位置处的表达式视为默认形参值。 要指定另一个值，必须使用 JSDoc 注释块。

### 引入变量

使用  Introduce Variable 重构将表达式替换为 [函数作用域变量 (var)](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#var-declarations)、 [块作用域变量 (let)](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#let-declarations)或 [块作用域常量 (const)](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#const-declarations)。 此重构使源代码更易于阅读和维护。 它还有助于避免使用没有关于其值或用途说明的硬编码常量。

重构前:

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

var e = Multiplication(4, 6);
                        
```

重构后:

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

var e = Multiplication(4, 6);

                        
```

Procedure: 引入变量

1. 在编辑器中，选择要转换为变量的表达式，然后按 `Ctrl+Alt+V` (Windows), `⌘ ⌥ V` (macOS), `⌘ ⌥ V` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ V` (macOS System Shortcuts), `Ctrl+Alt+V` (XWin), `Ctrl+Alt+V` (GNOME), `Alt+Shift+V` (KDE), `Ctrl+Alt+V` (Emacs), `Ctrl+Alt+V` (Sublime Text), `Ctrl+Alt+V` (Sublime Text (macOS)), `Ctrl+R, V` (Visual Studio), `⌘ R, V` (Visual Studio (macOS)), `Alt+Shift+V` (NetBeans), `Alt+Shift+L` (Eclipse), `⌘ ⌥ L` (Eclipse (macOS)) 并从上下文菜单中选择  `重构 | 引入变量` 。

或者，执行以下操作之一：

* 按 `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS))并选择 `引入变量` 。

* 前往 `重构 | 提取 | 变量` 。

2. 如果在当前文本光标位置检测到多个表达式，请从   表达式   列表中选择所需的表达式。

![引入变量：选择表达式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_refactoring_extract_variable_inplace_select_expression.png)

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

![引入变量：检测到所选表达式的多次出现](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_refactoring_extract_variable_inplace_multiple_occurrences.png)

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

4. 从列表中选择用于声明新变量的语句：

* 选择 var 来引入一个 [函数作用域变量](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#var-declarations)。 此变量可以在外层函数或在任何函数外声明。

* 选择 let 来引入一个 [块作用域变量](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#let-declarations)。

* 选择 常量 来引入一个 [块级作用域常量](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#const-declarations)。

![引入变量：选择范围](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_refactoring_extract_variable_inplace_choose_scope_type.png)

5. 在列表中双击建议的形参名称之一以接受它，或在带画布的字段中指定自定义名称。 按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) 准备。

#### 选择重构模式

您可以直接在编辑器中（以原地模式）提取变量 [如上所述](#typescript_extract_variable_inplace_refactoring)或使用   变量引入对话框  。 默认情况下，IntelliJ IDEA 会在就地模式下运行引入变量重构。 要使用   提取变量  对话框，请打开   设置  对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到   编辑器 | 代码编辑  ，并在   重构  区域中选择   在模态对话框中  选项。

### 引入常量

使用  Introduce Constant  重构来将表达式替换为 [constant](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#const-declarations)。 此重构使源代码更易于阅读和维护。 它还有助于避免使用没有关于其值或用途说明的硬编码常量。

假设您有一段包含硬编码  `部门名称：`  的代码。

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

通过引入常量重构，可以将硬编码的  `部门名称`  替换为常量。 提取常量的范围取决于新常量声明的上下文（在封闭方法内部、作为类的字段或不在任何类中）。

示例 1：引入常量 departmentName 并在 printName() 方法内声明它

重构前:

```TYPESCRIPT
export class MyAccountingDepartment {
    name: string;

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

    printMeeting(): void {...}

    generateReports(): void {...}
}
                    
```

重构后:

```TYPESCRIPT
export class MyAccountingDepartment {
    name: string;

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

    printMeeting(): void {...}

    generateReports(): void {...}
}
                    
```

示例 2：引入常量 departmentName 并将其声明为类 AccountingDepartment 的 _departmentName 字段

重构前:

```TYPESCRIPT
export class MyAccountingDepartment {
    name: string;

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

    printMeeting(): void {...}

    generateReports(): void {...}
}
                    
```

重构后:

```TYPESCRIPT
export class MyAccountingDepartment {
    name: string;

    private readonly _departmentName = "Department name: ";

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

    printMeeting(): void {...}

    generateReports(): void {...}
}

                    
```

示例 3：引入常量 departmentName 并在任何类外声明它

重构前:

```TYPESCRIPT
export class MyAccountingDepartment extends Department implements ReportingDepartment {
    name: string;

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

    printMeeting(): void {...}

    generateReports(): void {...}
}
                    
```

重构后:

```TYPESCRIPT
const departmentName = "Department name: ";

export class MyAccountingDepartment {
    name: string;

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

    printMeeting(): void {...}

    generateReports(): void {...}
}

                    
```

Procedure: 引入常量

1. 在编辑器中，选择要转换为常量的表达式，然后按 `Ctrl+Alt+C` (Windows), `⌘ ⌥ C` (macOS), `⌘ ⌥ C` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ C` (macOS System Shortcuts), `Ctrl+Alt+C` (XWin), `Ctrl+Alt+C` (GNOME), `Ctrl+Alt+C` (KDE), `Ctrl+Alt+C` (Emacs), `Ctrl+Alt+C` (Sublime Text), `⌘ ⌥ C` (Sublime Text (macOS)), `Ctrl+Alt+C` (Visual Studio), `⌘ ⌥ C` (Visual Studio (macOS)), `Alt+Shift+C` (NetBeans), `Ctrl+Alt+C` (Eclipse), `Ctrl+Alt+C` (Eclipse (macOS))，或从上下文菜单中选择  `重构 | 引入常量` 。

或者，执行以下操作之一：

* 按 `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS))并选择 `引入常量` 。

* 前往 `重构 | 提取 | 常量` 。

![调用引入常量重构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_refactoring_extract_constant__1_invoke.png)

2. 如果在当前文本光标位置检测到多个表达式，请从   表达式   列表中选择所需的表达式。

![引入常量：选择表达式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_refactoring_extract_constant__2_several_expressions.png)

3. 选择新常量的作用范围：

* 局部常量 将在封闭方法内声明，请参阅 [示例 1](#ws_ts_refactoring_extract_constant_example_1)。

* 类字段 将在当前类中声明，请参阅 [示例 2](#ws_ts_refactoring_extract_constant_example_2)。

* 全局或模块常量 将在任何类之外声明，请参阅 [示例 3](#ws_ts_refactoring_extract_constant_example_3)。

IntelliJ IDEA 会显示一个工具提示，指出提取的常量将根据所选作用域在哪里声明。

![引入常量：选择作用域](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_refactoring_extract_constant__3_select_scope.png)

4. 如果 IntelliJ IDEA 检测到该表达式的多个出现位置，请选择是替换所有出现位置，还是仅替换调用重构的位置。

![引入常量：全局常量的多次出现](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_refactoring_extract_constant__4_multiple_occurrences.png)

5. 在列表中双击建议的形参名称之一以接受它，或在带画布的字段中指定自定义名称。 按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) 准备。

![引入常量：选择名称](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_refactoring_extract_constant__5_specify_name.png)

### 引入字段

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

假设您有以下代码：

```TYPESCRIPT
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：引入字段 _calcAreais 并在外围方法 get Area () 中对其进行初始化

```TYPESCRIPT
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：引入字段 _calcAreais 并在其声明中对其进行初始化

```TYPESCRIPT
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：引入字段 _calcAreais 并在类的构造函数中对其进行初始化

```TYPESCRIPT
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;
    }
}
                
```

Procedure: 介绍一个字段

1. 在编辑器中，选择要转换为常量的表达式，然后按 `Ctrl+Alt+F` (Windows), `⌘ ⌥ F` (macOS), `⌘ ⌥ F` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ F` (macOS System Shortcuts), `Ctrl+Alt+F` (XWin), `Ctrl+Alt+F` (GNOME), `Ctrl+Alt+F` (KDE), `Ctrl+Alt+F` (Emacs), `Ctrl+Alt+F` (Sublime Text), `Ctrl+Alt+F` (Sublime Text (macOS)), `Ctrl+R, F` (Visual Studio), `⌘ R, F` (Visual Studio (macOS)), `Alt+Shift+E` (NetBeans), `Ctrl+Alt+F` (Eclipse), `⌘ ⌥ F` (Eclipse (macOS))，或从上下文菜单中选择  `重构 | 引入字段` 。

![引入字段重构 - 调用](https://resources.jetbrains.com/help/img/idea/2026.3/extract_field_inplace_invoke.png)

或者，执行以下操作之一：

* 按 `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS))并选择 `引入字段` 。

* 前往 `重构 | 提取 | 字段` 。

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

![在 TypeScript 中提取字段：检测到多个表达式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_extract_field_inplace_several_occurrences.png)

3. 在弹出窗口中，选择新字段将在哪里初始化：

* 当前方法 ，请参阅 [示例 1](#typescript_extract_field_examples_example_1_field_initialized_in_enclosing_method)。

* 字段声明 ，请参见 [示例 2](#typescript_extract_field_examples_example_2_field_initialized_in_field_declaration)。

* 构造函数 ，请参见 [示例 3](#typescript_extract_field_examples_example_3_field_initialized_in_constructor)。 请注意，如果您从字段初始化器调用重构，则此选项将被禁用。

![在 TypeScript 中提取字段：选择初始化](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_extract_field_inplace_initialize_in.png)

4. 在字段声明或构造函数中初始化时，可以使用 [readonly修饰符](https://www.typescriptlang.org/docs/handbook/classes.html#readonly-modifier)引入新字段。 要做到这一点，选中   设为只读   复选框。

5. 请选择字段可见性，可用选项有   公开  、   私有   和   protected  。 了解字段可见性修饰符详细信息，请参阅 [TypeScript 官方网站](https://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)

6. 在列表中双击建议的形参名称之一以接受它，或在带画布的字段中指定自定义名称。 按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) 准备。

#### 选择重构模式

默认情况下， IntelliJ IDEA 会直接在编辑器中（以就地模式）执行引入字段重构， [如上所述](#extract_field_inplace)。

要使用 [Extract Field Dialog](extract-field-dialog.html)，请打开   设置  对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到   编辑器 | 代码编辑  ，并在   重构  区域中选择   在模态对话框中  选项。

![重构 TypeScript：引入字段](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_extract_field_dialog_1.png)

### 提取方法

提取方法  重构可让你使用提取的代码创建带名称的方法或函数／方法。 调用  提取方法  重构时，IntelliJ IDEA 会检测作为所选代码段输入的变量以及作为其输出的变量。 检测到的输出变量将用作提取的方法或函数／方法的返回值。

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

在此示例中，从  `let c = a + b;`  表达式中提取了一个全局范围的方法  `NewMethod()` 。 提取方法的参数从  `let c = a + b;`  表达式中获取。

示例 1.1：生成函数／方法声明

重构前:

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

重构后:

```TYPESCRIPT
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：提取的函数／方法在表达式内声明

重构前:

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

重构后:

```TYPESCRIPT
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` 已选择。

重构前:

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

重构后:

```TYPESCRIPT
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()` 方法，该表达式不在任何方法内。 提取的方法是全局范围的。

重构前:

```TYPESCRIPT
var e = MyFunction(4, 6);
                   
```

重构后:

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

Procedure: 提取函数／方法或方法

1. 在编辑器中，选择一个代码片段转换成函数，然后按 `Ctrl+Alt+M` (Windows), `⌘ ⌥ M` (macOS), `⌘ ⌥ M` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ M` (macOS System Shortcuts), `Ctrl+Alt+M` (XWin), `Ctrl+Alt+M` (GNOME), `Ctrl+Alt+M` (KDE), `Ctrl+Alt+M` (Emacs), `Ctrl+Alt+M` (Sublime Text), `⌘ ⌥ M` (Sublime Text (macOS)), `Ctrl+R, M` (Visual Studio), `⌘ R, M` (Visual Studio (macOS)), `Alt+Shift+M` (NetBeans), `Alt+Shift+M` (Eclipse), `⌘ ⌥ M` (Eclipse (macOS)) 或从上下文菜单中选择  `重构 | 提取方法` 。

或者，执行以下操作之一：

* 按 `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS))并选择 `提取方法` 。

* 前往 `重构 | 提取 | 方法` 。

> **Tip:**
> 所选的代码片段不一定必须是语句集。 它也可能是代码中使用的一个表达式。

2. 如果所选表达式位于另一个函数／方法内部，请从列表中选择目标作用域。 IntelliJ IDEA 会显示一个工具提示，指出提取的函数／方法将在哪里声明：

![ws_ts_extract_method_choose_scope.png](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_extract_method_choose_scope.png)

* 如果您选择 顶层 ，提取的函数将声明在任何函数之外，请参阅上面的 [示例 1](#typescript_extract_method_examples_example_1_global_from_expression_inside_another_function)。

* 要在当前包含函数内声明提取的函数，请选择 function <current enclosing function name> ，请参阅上面的 [示例2](#typescript_extract_method_examples_example_2_local_from_inside_another_function)。

3. 要打开具有更多选项的 [Extract Function](extract-method-dialog.html)   提取函数／方法  对话框，请再次按 `Ctrl+Alt+M` (Windows), `⌘ ⌥ M` (macOS), `⌘ ⌥ M` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ M` (macOS System Shortcuts), `Ctrl+Alt+M` (XWin), `Ctrl+Alt+M` (GNOME), `Ctrl+Alt+M` (KDE), `Ctrl+Alt+M` (Emacs), `Ctrl+Alt+M` (Sublime Text), `⌘ ⌥ M` (Sublime Text (macOS)), `Ctrl+R, M` (Visual Studio), `⌘ R, M` (Visual Studio (macOS)), `Alt+Shift+M` (NetBeans), `Alt+Shift+M` (Eclipse), `⌘ ⌥ M` (Eclipse (macOS))。 在此对话框中，您可以选择提取的函数是通过生成的 [function declaration](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/function)声明，还是 [在表达式内部](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function)声明，并配置要作为参数传递的变量集。 请参见 [上面的示例](#typescript_extract_method_examples_example_1_1_global_inside_another_function_function_declaration_generated)。

Procedure: 默认打开 Extract Function 对话框

* 打开   设置   对话框 ( `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)))，转到   编辑器 | 代码编辑  ，并在   重构   区域选择   在模态对话框中   选项。

### 提取类型别名

使用此重构将类型声明表达式转换为 [type alias](https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-aliases)，并将所有出现的表达式替换为此别名。

假设您有以下带有  `{ z: number }`  类型声明的代码片段：

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

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

在下面的示例中，一个类型别名  `MyNewAlias`  被从  `{ z: number }`  类型声明中提取出来：

```TYPESCRIPT
 type MyNewAlias = { z : number };

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

function anotherObjectReturned(): { x : number, y : MyNewAlias } {
    return null
}
                        
```

Procedure: 提取类型别名

1. 在编辑器中， 将文本光标置于您希望用类型别名替换的表达式内， 然后从上下文菜单中选择  `重构 | 提取 Type Alias`  或从主菜单中选择  `重构 | 提取 | 类型别名` 。

2. 如果在当前文本光标位置检测到多个表达式，请从   表达式   列表中选择所需的表达式。

![提取类型别名 - 选择表达式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_extract_type_alias_select_type_declaration_expression.png)

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

![提取类型别名 - 多个出现位置](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_extract_type_alias_multiple_occurrences.png)

4. 在带画布的字段中，输入类型别名的名称，准备好后按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS))。

![提取类型别名 - 指定新名称](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_extract_type_alias_specify_name.png)

### 提取超类

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

假设有一个类  `AccountingDepartment` ，并且预计其中的  `printName()`  方法将被重用。

```TYPESCRIPT
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` 和  `名称` 字段。

```TYPESCRIPT
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...");
    }
}
                
```

Procedure: 提取超类

1. 将文本光标放在要从中提取超类的类内任意位置。

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

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

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

![提取超类](https://resources.jetbrains.com/help/img/idea/2026.3/typescript_extract_superclass.png)

5. 选择   提取超类  。 IntelliJ IDEA 创建一个新类，并使用  `extends`  标记源类。

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

### 提取接口

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

假设您有一个类  `AccountingDepartment` 并且您期望其中的  `generateReports()` 方法将有其他实现。

```TYPESCRIPT
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()`  包含在其中。

```TYPESCRIPT
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...");
    }
}
                
```

Procedure: 提取接口

1. 将文本光标置于您想要提取接口的类中的任何位置。

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

3. 指定新接口的名称，并选择您希望包含在其中的类成员旁边的复选框。

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

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

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

> **Note:**
> 如果实例引用的某个方法或字段未在接口中定义，IntelliJ IDEA将不会建议替换它。

### 引入对象或数组解构

析构可让你轻松地将数组和对象中的值解压缩到变量中。 此功能性具有非常简洁的语法，通常在需要在应用程序中传递数据时使用。 如需了解更多信息，请参阅 [TypeScript official website](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring)。

在 IntelliJ IDEA 中，可以使用意图操作 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) 调用析构。 使用  替换为对象/数组析构  操作时，原始赋值会被移除。 要保留赋值，请使用  引入对象/数组析构 。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_refactoring_destructuring.mp4)

Procedure: 替换原始分配

1. 将文本光标放在数组或对象中的值处，然后按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))。

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

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

Procedure: 保留原始分配

1. 将文本光标放在数组或对象中的值处，然后按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))。

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

Procedure: 生成函数的解构参数

1. 将文本光标放在函数／方法的形参处，然后按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))。

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

![有意通过解构操作：将参数转换为对象](https://resources.jetbrains.com/help/img/idea/2026.3/ws_ts_destructuring_convert_params.png)

## 内联重构

内联重构与 [提取重构](#typescript_extract_refactorings)相反。

示例 1: 内联变量

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

重构前:

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

重构后:

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

示例 2：内联方法

内联方法 /  内联函数／方法  重构会将方法或函数／方法的主体放入其调用方(s)的主体中；方法/函数／方法本身会被删除。

在下面的示例中，  `Sum()`  的主体被放置在  `Multiplication()`  的主体内。

重构前:

```TYPESCRIPT
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);
                   
```

重构后:

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

var e = Multiplication(4, 6);

                    
```

Procedure: 进行 Inline 重构

1. 在编辑器中，将文本光标置于要内联的符号处，然后执行以下操作之一：

* 按下 `Ctrl+Alt+N` (Windows), `⌘ ⌥ N` (macOS), `⌘ ⌥ N` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ N` (macOS System Shortcuts), `Ctrl+Alt+N` (XWin), `Ctrl+Alt+N` (GNOME), `Ctrl+Alt+N` (KDE), `Ctrl+Alt+N` (Emacs), `Ctrl+Alt+N` (Sublime Text), `⌘ ⌥ N` (Sublime Text (macOS)), `Ctrl+R, I` (Visual Studio), `⌘ R, I` (Visual Studio (macOS)), `Ctrl+Alt+N` (NetBeans), `Alt+Shift+I` (Eclipse), `⌘ ⌥ I` (Eclipse (macOS))。

* 按 `Ctrl+Alt+Shift+T` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS))并从列表中选择 `内联` 。 ![调用内联变量重构操作](https://resources.jetbrains.com/help/img/idea/2026.3/typescript_inline_refactorings_procedure.png)

* 从上下文菜单或主菜单中选择 `重构 | 内联` 。

## 更改签名重构

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

您还可以使用 [Introduce Parameter](#typescript_extract_parameter)重构添加一个参数。

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

重构前:

```TYPESCRIPT
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']);
                        
```

重构后:

```TYPESCRIPT
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);
                        
```

Procedure: 调用更改签名

* 在编辑器中，将文本光标放在要重构的函数／方法名称内，然后按 `Ctrl+F6` (Windows), `⌘ F6` (macOS), `⌘ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ S` (macOS System Shortcuts), `Ctrl+F6` (XWin), `Ctrl+F6` (GNOME), `Ctrl+6` (KDE), `Ctrl+F6` (Emacs), `Ctrl+F6` (Sublime Text), `Ctrl+F6` (Sublime Text (macOS)), `Ctrl+R, S` (Visual Studio), `⌘ R, S` (Visual Studio (macOS)), `Ctrl+F6` (NetBeans), `Alt+Shift+C` (Eclipse), `⌘ ⌥ C` (Eclipse (macOS))，或从上下文菜单或主菜单中选择   重构 | 更改签名  。   更改签名   对话框将打开。

Procedure: 重命名函数

* 在   更改签名  对话框 `Ctrl+F6` (Windows), `⌘ F6` (macOS), `⌘ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ S` (macOS System Shortcuts), `Ctrl+F6` (XWin), `Ctrl+F6` (GNOME), `Ctrl+6` (KDE), `Ctrl+F6` (Emacs), `Ctrl+F6` (Sublime Text), `Ctrl+F6` (Sublime Text (macOS)), `Ctrl+R, S` (Visual Studio), `⌘ R, S` (Visual Studio (macOS)), `Ctrl+F6` (NetBeans), `Alt+Shift+C` (Eclipse), `⌘ ⌥ C` (Eclipse (macOS))中，编辑   名称  字段。

Procedure: 更改函数的返回类型

* 在   返回值类型   字段中，指定函数返回值的类型。 如果该字段为空，则返回类型将被视为  `void` 。 了解更多有关返回类型的信息，请访问 [TypeScript 官方网站](https://www.typescriptlang.org/docs/handbook/functions.html#writing-the-function-type)。

Procedure: 更改函数的可见性

> **Note:**
> 配置可见性仅适用于在类中定义的函数。

* 从   可见性  列表中选择一个 [函数修饰符](https://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)，可用的选项有 [public（默认）](https://www.typescriptlang.org/docs/handbook/classes.html#public-by-default)、 [private](https://www.typescriptlang.org/docs/handbook/classes.html#understanding-private)和 [protected](https://www.typescriptlang.org/docs/handbook/classes.html#understanding-protected)。

Procedure: 管理函数参数

* 在   更改签名   对话框 `Ctrl+F6` (Windows), `⌘ F6` (macOS), `⌘ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ S` (macOS System Shortcuts), `Ctrl+F6` (XWin), `Ctrl+F6` (GNOME), `Ctrl+6` (KDE), `Ctrl+F6` (Emacs), `Ctrl+F6` (Sublime Text), `Ctrl+F6` (Sublime Text (macOS)), `Ctrl+R, S` (Visual Studio), `⌘ R, S` (Visual Studio (macOS)), `Ctrl+F6` (NetBeans), `Alt+Shift+C` (Eclipse), `⌘ ⌥ C` (Eclipse (macOS)) 中，使用形参表及其右侧的按钮:

* 要添加参数，点击 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)  `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (NetBeans), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS))，并指定新参数的名称及其类型。 指定参数的默认值或通过函数调用传递的值。 如果有必要，把 [新参数传递](#propagate_params)给调用当前函数的函数。

* 要移除参数，请点击相应行中的任意单元格，然后点击 ![删除按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.remove.svg)  `Alt+Delete` (Windows), `⌘ ⌦` (macOS), `⌘ ⌦` (IntelliJ IDEA Classic (macOS)), `⌘ ⌦` (macOS System Shortcuts), `Alt+Delete` (XWin), `Alt+Delete` (GNOME), `Alt+Delete` (KDE), `Alt+Delete` (Emacs), `Alt+Delete` (Sublime Text), `⌘ ⌦` (Sublime Text (macOS)), `Ctrl+R, D` (Visual Studio), `⌘ R, D` (Visual Studio (macOS)), `Alt+Delete` (NetBeans), `Alt+Delete` (Eclipse), `Alt+Delete` (Eclipse (macOS))。

* 要重新排序参数，使必需参数列在可选参数之前，请使用 ![“向上”按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.up.svg)  `Alt+Up` (Windows), `⌃ ⇧ ↑` (macOS), `⌃ ↑` (IntelliJ IDEA Classic (macOS)), `⌃ ⌥ ↑` (macOS System Shortcuts), `Alt+Up` (XWin), `Alt+Up` (GNOME), `Alt+Up` (KDE), `Alt+Up` (Emacs), `Alt+Up` (Sublime Text), `Alt+Up` (Sublime Text (macOS)), `Alt+Up` (Visual Studio), `⌃ ⇧ ↑` (Visual Studio (macOS)), `Ctrl+Alt+Up` (NetBeans), `Ctrl+Shift+Up` (Eclipse), `⌃ ⌥ ↑` (Eclipse (macOS)) 和 ![“向下”按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.down.svg)  `Alt+Down` (Windows), `⌃ ⇧ ↓` (macOS), `⌃ ↓` (IntelliJ IDEA Classic (macOS)), `⌃ ⌥ ↓` (macOS System Shortcuts), `Alt+Down` (XWin), `Alt+Down` (GNOME), `Alt+Down` (KDE), `Alt+Down` (Emacs), `Alt+Down` (Sublime Text), `Alt+Down` (Sublime Text (macOS)), `Alt+Down` (Visual Studio), `⌃ ⇧ ↓` (Visual Studio (macOS)), `Ctrl+Alt+Down` (NetBeans), `Ctrl+Shift+Down` (Eclipse), `⌃ ⌥ ↓` (Eclipse (macOS))。 更多信息，请访问 [TypeScript official website](https://www.typescriptlang.org/docs/handbook/functions.html#optional-and-default-parameters)。

* 要重命名形参，请编辑 名称 字段。

Procedure: 沿调用层次传播参数

1. 在   更改签名  对话框 `Ctrl+F6` (Windows), `⌘ F6` (macOS), `⌘ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ S` (macOS System Shortcuts), `Ctrl+F6` (XWin), `Ctrl+F6` (GNOME), `Ctrl+6` (KDE), `Ctrl+F6` (Emacs), `Ctrl+F6` (Sublime Text), `Ctrl+F6` (Sublime Text (macOS)), `Ctrl+R, S` (Visual Studio), `⌘ R, S` (Visual Studio (macOS)), `Ctrl+F6` (NetBeans), `Alt+Shift+C` (Eclipse), `⌘ ⌥ C` (Eclipse (macOS))中，选择参数并点击 ![传播按钮](https://resources.jetbrains.com/help/img/idea/2026.3/propagateParameters.png)。   选择传播新参数的方法   对话框打开。 左侧窗格会显示函数／方法调用的层次结构。 选择函数／方法时，右侧窗格会分别在   调用方法   和   被调用方法   字段中显示其代码及其调用的函数／方法的代码。

2. 在左侧窗格中，选中要将形参传播到的函数／方法旁边的复选框，然后点击   OK  。

Procedure: 预览更改并完成重构

1. 在   更改签名   对话框 `Ctrl+F6` (Windows), `⌘ F6` (macOS), `⌘ F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ S` (macOS System Shortcuts), `Ctrl+F6` (XWin), `Ctrl+F6` (GNOME), `Ctrl+6` (KDE), `Ctrl+F6` (Emacs), `Ctrl+F6` (Sublime Text), `Ctrl+F6` (Sublime Text (macOS)), `Ctrl+R, S` (Visual Studio), `⌘ R, S` (Visual Studio (macOS)), `Ctrl+F6` (NetBeans), `Alt+Shift+C` (Eclipse), `⌘ ⌥ C` (Eclipse (macOS)) 中，点击   预览  。

2. 在   重构预览   选项卡（位于 [查找工具窗口](find-tool-window.html)）中， [查看预期更改](null)，进行必要调整，准备就绪后点击   执行重构  。

> **Note:**
> 要立即执行重构，请点击   重构  。

## 将默认导出转换为名称导出

对于类、函数／方法、常量变量、字符串、对象和类型，可以将  `export default`  语句替换为带名称的  `导出`  语句，并相应更新对应的  `import`  语句。

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/ts_convert_default_export_to_named_intro.mp4)

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

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/ts_convert_default_export_to_named_reexport.mp4)

Procedure:

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

* 将文本光标放在  `export default`  语句处，或放在要导出的内容的名称处，按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))，然后选择   将 default export 转换为命名 export  。 要切换预览，请按 `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))。

![从 export 语句调用默认导出转换](https://resources.jetbrains.com/help/img/idea/2026.3/ts_convert_default_export_to_named_from_export.png)

* 在  `import`  语句内，将文本光标放在所导入内容的名称处，按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))，然后选择   将 default export 转换为命名 export  。 预览 ( `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))) 会显示  `import`  语句将如何更新。

![从 import 语句调用默认导出转换](https://resources.jetbrains.com/help/img/idea/2026.3/ts_convert_default_export_to_named_from_import.png)

> **Note:**
> * 也可以在 JavaScript、Vue、React 和 Angular 上下文中使用此操作。
>
> * 仅当导出的符号带有名称时，此转换才可用。

## 将命名 export 转换为 default export

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

[Video](https://resources.jetbrains.com/help/img/idea/2026.3/typescript_refactoring_convert_named_export_to_default_export_intro.mp4)

Procedure:

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

* 在  `导出`  语句内，将文本光标放在要导出的内容的名称处，按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))，然后选择   将命名 export 转换为 default export  。 要切换预览，请按 `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))。

![从 export 语句中将命名导出转换为默认导出](https://resources.jetbrains.com/help/img/idea/2026.3/typescript_refactoring_convert_named_export_to_default_export_from_export.png)

* 在  `import`  语句内，将文本光标放在所导入内容的名称处，按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))，然后选择   将命名 export 转换为 default export  。 预览 ( `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Ctrl+Q` (NetBeans), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS))) 会显示  `import`  语句将如何更新。

![从 export 语句中将命名导出转换为默认导出](https://resources.jetbrains.com/help/img/idea/2026.3/typescript_refactoring_convert_named_export_to_default_export_from_import.png)

> **Note:**
> 仅当包含导出的文件中尚无  `默认`  导出时，此重构才可用。

## See also

### 过程

[代码重构](refactoring-source-code.html)