ツイートはてブ LINE Pocket

TypeScript のリファクタリング

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

移動リファクタリング

WebStorm を使用すると、ファイルやフォルダーを移動できるだけでなく、TypeScript の最上位シンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュールのクラス、関数、変数に対して機能します。

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

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

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

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

抽象クラス 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);
    }
    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...");
    }
}
            

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

メンバーをプルアップするクラス内の任意の場所にキャレットを配置します。
メインメニューまたはコンテキストメニューからリファクタリング | メンバーのプルアップを選択します。メンバーのプルアップダイアログが開きます。
リストから、メソッドを移動するスーパークラスまたはインターフェースを選択します。
メソッドをプルアップするには、プルアップするメンバーリストでそのメソッドの横にあるチェックボックスを選択します。該当する場合は、移動するメソッドの横にある abstract にするチェックボックスを選択します。

名前の変更リファクタリング

任意の言語のコンテキストで使用できるファイルとフォルダーの名前を変更するに加えて、クラス、メソッド、変数、パラメーター、フィールドの名前を変更することもできます。WebStorm は、宣言内のシンボルの名前を変更し、デフォルトでは、現在のプロジェクトでのすべての使用箇所を変更します。

名前変更リファクタリングはインプレースで実行されますが、Shift+F6 を押すと、名前変更ダイアログでリファクタリングスコープを構成できます。

デフォルトでダイアログを開くには、設定ダイアログ (Ctrl+Alt+S) を開き、エディター | コード編集に移動して、リファクタリングオプションを指定する領域でモーダルダイアログ内オプションを選択します。

エディターで、名前を変更するクラス、メソッド、変数、フィールドを選択し、Shift+F6 を押すか、コンテキストメニューから名前変更を選択します。
キャンバスのあるフィールドで、シンボルの新しい名前を指定します。名前を入力するか、リストから適切な名前を選択します。
オプション:
ハイライトされた記号の横にあるをクリックしてまた、名前を変更しますポップアップを開き、コメントと文字列内を検索およびテキスト出現箇所の検索チェックボックスを選択して、コメント、文字列リテラル、テキストでのシンボルの使用箇所の名前を変更します。
パラメーターの名前を変更する場合、また、名前を変更しますポップアップおよびは使用できません。追加のオプションを指定するには、名前変更ダイアログ Shift+F6 をもう一度開きます。
オプション:
より多くのオプションを使用して名前変更ダイアログを開くには、もう一度 Shift+F6 を押します。
- コメントと文字列内を検索チェックボックスを選択して、コメント、ドキュメントコメント、文字列リテラルでのシンボルの使用箇所の名前を変更します。
- テキスト出現箇所の検索チェックボックスを選択して、HTML 内のテキストおよびプロジェクトに含まれるその他のファイル内の一致するシンボルの名前を変更します。
- JavaScript ファイルを検索するチェックボックスを選択して、生成された JavaScript コードでのシンボルの使用箇所の名前を変更します。
- シンボルの動的使用箇所の名前を変更するには、動的参照の検索チェックボックスを選択します。
  動的参照の検索チェックボックスを選択すると、クリアするまでダイアログがデフォルトで開きます。
  以下の例に示すように、リファクタリングに動的な使用箇所を含めると、誤った名前変更が発生する可能性があることに注意してください。ここで、e の型は any であるため、console.log(e.target) の target を myTarget に変更できます。つまり、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 オフィシャル Web サイト(英語)のオプションパラメーターとデフォルトパラメーターの詳細を参照してください。
リスト内でそれをダブルクリックして提案されたパラメーター名の 1 つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら Enter を押します。

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

上記のようにエディター（インプレースモード）でパラメーターを抽出するか、パラメーターの導入ダイアログを使用できます。これらの 2 つのアプローチはかなり似ています。違いは次のとおりです。

リファクタリングの結果のプレビュー。
ダイアログで、プレビューをクリックして、検索ツールウィンドウの専用タブで予想される変更を確認できます。インプレースモードでは、この機能は使用できません。
デフォルトのパラメーター値の指定。
ダイアログで、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 を選択します。
リスト内でそれをダブルクリックして提案されたパラメーター名の 1 つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら Enter を押します。

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

上記のように（インプレースモードで）エディターで変数を抽出するか、変数の導入ダイアログを使用できます。デフォルトでは、WebStorm はインプレースモードで IntroduceVariable リファクタリングを実行します。変数の導入ダイアログを使用するには、設定ダイアログ（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 が式の複数の出現を検出した場合、それらすべてを置き換えるか、リファクタリングが呼び出されたもののみを置き換えるかを選択します。
リスト内でそれをダブルクリックして提案されたパラメーター名の 1 つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら 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: 導入されたフィールド _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 を参照してください。フィールド初期化子からリファクタリングを呼び出す場合、このオプションは無効になることに注意してください。
フィールド宣言またはコンストラクターで初期化する場合、新しいフィールドは読み取り専用修飾子を使用(英語)して導入できます。これを行うには、読み取り専用にするチェックボックスを選択します。
フィールドの表示を選択すると、使用可能なオプションは Public、Private、Protected です。TypeScript オフィシャル Web サイト(英語)のフィールド可視性修飾子について学ぶ
リスト内でそれをダブルクリックして提案されたパラメーター名の 1 つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら 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 を押してメソッドの抽出を選択します。
- リファクタリング | 抽出 | メソッドに移動します。
選択されたコードフラグメントは、必ずしも一連のステートメントである必要はありません。コード内のどこかで使用される式であってもよい。
選択した式が他の関数の中にある場合は、リストから宛先スコープを選択します。
- global を選択した場合、抽出された関数は関数の外で宣言されます。上記の例 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 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | シグネチャーの変更を選択します。「シグネチャーの変更」ダイアログが開きます。

関数の名前を変更する

シグネチャーの変更ダイアログ 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 で、プレビューをクリックします。
検索ツールウィンドウのリファクタリングプレビュータブで、予想される変更を表示し、必要な調整を行い、準備ができたらリファクタリング実行をクリックします。

最終更新日: 2024 年 10 月 17 日

TypeScript のリファクタリング

移動リファクタリング

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

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

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

名前の変更リファクタリング

クラスの名前と含まれているファイルを準拠させてください

対応するクラスの名前に準拠してファイルの名前を保持する

抽出 / 導入リファクタリング

パラメーターの導入

パラメーターを導入する

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

変数の導入

変数を導入する

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

定数の導入

定数を導入する

フィールドの導入

フィールドを導入する

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

メソッドの抽出

関数を抽出する

デフォルトで関数抽出ダイアログを開く

型エイリアスの抽出

型エイリアスを抽出する

スーパークラスの抽出

スーパークラスを抽出する

インターフェースの抽出

インターフェースを抽出する

オブジェクトまたは配列の分割代入を導入

元の割り当てを置き換える

元の割り当てを保持する

関数の分解パラメーターを生成する

インライン化リファクタリング

インラインで実行リファクタリング

シグネチャーの変更リファクタリング

シグネチャーの変更を呼び出す

関数の名前を変更する

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

関数の可視性を変更する

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

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

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

関連ページ：