TypeScript のリファクタリング

リファクタリング(英語)とは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを堅牢な dry(英語) 状態に保ち、保守しやすくできます。

移動リファクタリング

ファイルやフォルダーの移動に加えて、WebStorm は TypeScript のトップレベルシンボルも移動できます。シンボルの移動リファクタリングは、ES6 モジュールのクラス、関数、変数に対して機能します。

クラス、関数、変数を移動する

移動するシンボルを選択します。
F6 を押すか、メインメニューまたは選択したコンテキストメニューからリファクタリング | 移動を選択します。あるいは、リファクタリング | リファクタリングを選択するか Ctrl+Alt+Shift+T を押してから、リストから移動しを選択します。
モジュールメンバーの移動ダイアログが開きます。
宛先ファイルを指定し、移動するメンバーを選択します。
デフォルトでは、WebStorm はメンバーの可視性を必要なレベルまで自動的に上げます。可視性レベルを変更しない場合は、可視性のそのままをクリックします。

クラスメンバーのプルアップリファクタリング

クラスメンバーをプルアップするリファクタリングは、現在のクラスから実装されているスーパークラスまたはインターフェースへ、クラス階層内のクラスメソッドを上に移動します。

クラスのメソッドをスーパークラスまたはインターフェースに移動する

次のいずれかの操作でメンバーのプルアップダイアログを開きます：
- メンバーを呼び出したいクラス内の任意の場所にカーソルを置き、メインメニューまたはコンテキストメニューからリファクタリング | メンバーのプルアップを選択します。
- Ctrl+Shift+A を押して、 Pull Members Up を検索してください。
メンバーのプルアップダイアログのリストから、メソッドを移動したいスーパークラスまたはインターフェースを選択します。
メソッドをプルアップするには、プルアップするメンバーリストでそのメソッドの横にあるチェックボックスを選択します。該当する場合は、移動するメソッドの横にある抽象化するチェックボックスを選択します。

抽象クラス Department を拡張し、インターフェース ReportingDepartment を実装するクラス AccountingDepartment があるとします。

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);
                            }
                        }

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

                        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
                        }

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

                        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 は他ファイルのインポート文でこのファイル名も更新します。

この提案を却下した場合は、後でファイル名の変更… インテンションアクションを使用してファイルの名前を変更できます。これは、新しいファイルを作成したばかりで、そこにクラスまたはインターフェースを入力し始めたときに、より適切な名前を思いついた場合に便利です。

別のインテンションアクションは、クラスを対応する名前の新しいファイルに移動することを提案します。推奨ファイル名の形式は、ファイル名規約リストのスタイルが Code Style: 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 オフィシャル Web サイト(英語)のオプションパラメーターとデフォルトパラメーターの詳細を参照してください。
候補リストからパラメーター名をダブルクリックして選択するか、キャンバスのフィールドにカスタム名を指定してください。準備ができたら 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 はインプレースモードでIntroduce Variableリファクタリングを実行します。変数の導入ダイアログを使用するには、設定ダイアログ（Ctrl+Alt+S ）を開き、エディター | コード編集に移動して、リファクタリング領域でモーダルダイアログ内オプションを選択します。

定数の導入

定数の導入リファクタリングを使用して、式を定数(英語)に置き換えます。このリファクタリングにより、ソースコードの読み取りと保守が容易になります。また、値や目的の説明がないままハードコードされた定数の使用を避けるのにも役立ちます。

Department name: がハードコードされたコードのフラグメントがあるとします。

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

定数の導入リファクタリングを使用すると、ハードコードされた Department name を定数に置き換えることができます。抽出された定数のスコープは、新しい定数が宣言されているコンテキスト（囲んでいるメソッド内、クラスのフィールド、クラス外）に依存します。

例 1: 定数 departmentName を導入し、それを printName() メソッド内で宣言します

export class MyAccountingDepartment {
    name: string;

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

    printMeeting(): void {...}

    generateReports(): void {...}
}
                    
     

export class MyAccountingDepartment {
    name: string;

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

    printMeeting(): void {...}

    generateReports(): void {...}
}
                    
     

例 2: 定数 departmentName を導入し、それをクラス AccountingDepartment の _departmentName フィールドとして宣言します

export class MyAccountingDepartment {
    name: string;

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

    printMeeting(): void {...}

    generateReports(): void {...}
}
                    
     

export class MyAccountingDepartment {
    name: string;

    private readonly _departmentName = "Department name: ";

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

    printMeeting(): void {...}

    generateReports(): void {...}
}

例 3: 定数 departmentName を導入し、いずれのクラスにも属さずに宣言します

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

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

    printMeeting(): void {...}

    generateReports(): void {...}
}
                    
     

const departmentName = "Department name: ";

export class MyAccountingDepartment {
    name: string;

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

    printMeeting(): void {...}

    generateReports(): void {...}
}

定数を導入する

エディターで、定数に変換する式を選択して Ctrl+Alt+C を押すか、コンテキストメニューからリファクタリング | 定数の導入を選択します。
または、次のいずれかを実行します：
- Ctrl+Alt+Shift+T を押して定数の導入を選択します。
- リファクタリング | 抽出 | 定数に進みます。
現在のキャレット位置で複数の式が検出された場合は、式リストから必要な式を選択します。
新しい定数のスコープを選択します：
- ローカル定数は囲むメソッド内で宣言されます。詳細は例 1を参照してください。
- クラスフィールドは現在のクラス内で宣言されます。詳細は例 2を参照してください。
- グローバルまたはモジュール定数はどのクラスの外でも宣言されます。詳細は例 3を参照してください。
WebStorm は、選択したスコープに応じて抽出した定数が宣言される場所を示すツールチップを表示します。
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;
    }
}

                
   

以下の 3 つの例すべてで、同じフィールド _calcArea が導入されています。例は、導入されたフィールドを初期化する 3 つの異なる方法を示しています。

例 1: フィールド _calcAreais を導入し、囲んでいるメソッド 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: フィールド _calcAreais を導入し、それを宣言で初期化します

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 を導入し、クラスのコンストラクターで初期化します

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 修飾子(英語)を付けることができます。これを行うには、読み取り専用にするチェックボックスをオンにします。
フィールドの表示を選択すると、使用可能なオプションは公開、非公開、保護です。 TypeScript オフィシャル Web サイト(英語)のフィールド可視性修飾子について学ぶ
候補リストからパラメーター名をダブルクリックして選択するか、キャンバスのフィールドにカスタム名を指定してください。準備ができたら Enter を押します。

リファクタリングモードの選択

デフォルトでは、WebStorm は、エディター（インプレースモード）内でフィールド導入リファクタリングを実行します上記の通り。

フィールド導入ダイアログを使う場合は、設定ダイアログ（Ctrl+Alt+S ）を開き、エディター | コード編集へ移動し、リファクタリングエリアでモーダルダイアログ内オプションを選択します。

メソッドの抽出

メソッドの抽出リファクタリングでは、抽出されたコードで名前付きのメソッドまたは関数を作成できます。メソッドの抽出リファクタリングを呼び出すと、WebStorm は選択されたコードフラグメントの入力変数と出力変数を検出します。検出された出力変数は、抽出されたメソッドまたは関数の戻り値として使用されます。

例 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: 閉じたメソッドの中で宣言付きのメソッドを抽出する

この例では、 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: 任意のメソッドの外部の式からメソッドを抽出する

メソッド NewMethod() は、メソッド外の var e = MyFunction(4, 6); 式から抽出されます。抽出されたメソッドはグローバルスコープです。

var e = MyFunction(4, 6);

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

関数またはメソッドを抽出する

エディターで、関数に変換するコードフラグメントを選択し、 Ctrl+Alt+M を押すか、コンテキストメニューからリファクタリング | メソッドの抽出を選択します。
または、次のいずれかを実行します：
- Ctrl+Alt+Shift+T を押してメソッドの抽出を選択します。
- リファクタリング | 抽出 | メソッドに進みます。
選択されたコードフラグメントは、必ずしも一連のステートメントである必要はありません。コード内のどこかで使用される式であってもよい。
選択した式が別の関数内にある場合は、リストから抽出先のスコープを選択してください。 WebStorm は、抽出された関数／メソッドが宣言される場所を示すツールチップを表示します：
- トップレベルを選択した場合、抽出された関数は任意の関数の外で宣言されます。上記の例 1 を参照してください。
- 現在囲んでいる関数内で抽出された関数を宣言するには、関数 <現在の包含関数名> を選択します。上記の例 2 を参照してください。
関数の抽出関数の抽出ダイアログを開いてさらにオプションを表示するには、もう一度 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
}                        
   

以下の例では、型エイリアス MyNewAlias が { z: number } 型宣言から抽出されています。

 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 オフィシャル Web サイト(英語)を参照してください。

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() に変更され、新しい 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 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | シグネチャーの変更を選択します。「シグネチャーの変更」ダイアログが開きます。

Rename a function

シグネチャーの変更ダイアログ Ctrl+F6 で、名前フィールドを編集します。

関数の戻りの型を変更する

戻り値の型フィールドに、関数が返す値の型を指定します。フィールドが空の場合、戻り値の型は void として扱われます。 TypeScript オフィシャル Web サイト(英語)の return の種類について詳しくは、こちらを参照してください。

関数の可視性を変更する

可視性リストから、関数修飾子を選択します。使用可能なオプションは、 public (デフォルト)、 private 、および protected です。

関数パラメーターを管理する

シグネチャーの変更ダイアログ Ctrl+F6 では、パラメーターのテーブルとその右側のボタンを使用します。
- パラメーターを追加するには、 Alt+Insert をクリックして、新しいパラメーターの名前とその型を指定します。パラメーターのデフォルト値または関数呼び出しを介して渡される値を指定します。
  必要に応じて、現在の関数を呼び出す関数に新しいパラメーターを伝達します。
- パラメーターを削除するには、対応する行のセルのいずれかをクリックして、 Alt+Delete をクリックします。
- パラメーターを並べ替えて、必須パラメーターがオプションのパラメーターの前にリストされるようにするには、 Alt+Up、 Alt+Down を使用します。 TypeScript オフィシャル Web サイト(英語)の必須およびオプションのパラメーターの詳細を参照してください。
- パラメーターの名前を変更するには、名前フィールドを編集します。

呼び出しの階層に沿ってパラメーターを伝搬する

シグネチャーの変更ダイアログ Ctrl+F6 で、パラメーターを選択し、をクリックします。新規パラメーターを伝播するメソッドの選択ダイアログが開きます。左側のペインには、関数呼び出しの階層が表示されます。関数を選択すると、右側のペインのコードと、呼び出し元メソッドフィールドと呼び出し先メソッドフィールドにそれぞれ呼び出される関数のコードが表示されます。
左側のペインで、パラメーターを伝播する機能の横にあるチェックボックスを選択し、 OK をクリックします。

変更をプレビューしてリファクタリングを完了する

シグネチャーの変更ダイアログ 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 ステートメントがどのように更新されるかが表示されます。

2026 年 6 月 8 日