WebStorm 2020.2 ヘルプ

TypeScript のリファクタリング

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

移動リファクタリング

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

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

  1. 移動するシンボルを選択します。

  2. F6 を押すか、メインメニューまたは選択したコンテキストメニューからリファクタリング | 移動を選択します。あるいは、リファクタリング | リファクタリングを選択するか Ctrl+Alt+Shift+T を押してから、リストから移動を選択します。

    モジュールメンバーの移動ダイアログが開きます。

  3. 宛先ファイルを指定し、移動するメンバーを選択します。

  4. デフォルトでは、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..."); } }
Pulling a class method to a superclass

例 2: クラスメソッドをインターフェースに移動する
この例では、PrintMeeting() メソッドが AccountingDepartment クラスから ReportingDepartment インターフェースにコピーされます。

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

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

  1. メンバーをプルアップするクラス内の任意の場所にキャレットを配置します。

  2. メインメニューまたはコンテキストメニューからリファクタリング | メンバーのプルアップを選択します。メンバーのプルアップダイアログが開きます。

  3. リストから、メソッドを移動するスーパークラスまたはインターフェースを選択します。

  4. メソッドをプルアップするには、引き上げるメンバーリストでそのメソッドの横にあるチェックボックスを選択します。該当する場合は、移動するメソッドの横にある abstract にするチェックボックスを選択します。

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

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

関数、クラス、または変数の名前を変更する

    デフォルトで名前変更ダイアログを開く

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

    パラメーターの名前を変更する

    1. エディターでパラメーターを選択して Shift+F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 名前の変更を選択します。

    2. 選択したパラメーターを囲む赤いキャンバスのあるフィールドに、新しいパラメーター名を入力します。

    3. リファクタリングを実行するには、Enter を押します。

    クラスの名前を保持し、準拠するファイルを含む

    クラスの名前を変更すると、WebStorm は同じ名前のファイルの名前を変更することを提案します。提案を受け入れると、WebStorm は他のファイルのインポートステートメントでこのファイルの名前を更新します。

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

    別のインテンションアクションは、対応する名前を持つ新しいファイルにクラスを移動することを提案しています。推奨されるファイル名の形式は、コードスタイル : JavaScript ページのファイル名規約リストから選択されたスタイルによって決まります。

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

    1. クラスの名前にキャレットを置き、Alt+Enter を押します。

    2. インテンションリストから、クラス名に一致するようにファイルを <class_name.ts> に名前変更するまたはクラス <class_name> をファイル <class_name.ts> に移動します。を選択します。

      Moving a class to a file keeping the names in compliance

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

    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, ");

    パラメーターを導入する

    1. エディターで、パラメーターに変換する式内にキャレットを配置し、Ctrl+Alt+P を押すか、コンテキストメニューからリファクタリング | パラメーターの導入を選択します。

      または、次のいずれかを実行します。

      • Ctrl+Alt+Shift+T を押してパラメーターの導入を選択します。

      • メインメニューからリファクタリング | 抽出 | パラメーターを選択します。

    2. 現在のカーソル位置で複数の式が検出された場合は、リストから必要な式を選択してください。

      Introduce Parameter: select an expression

    3. 選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換するまたは出現箇所をすべて置換を選択してください。最後に、リファクタリングを設定するためのポップアップが表示されます。

      Introduce Parameter popup
    4. JSDoc の生成を選択すると、JSDoc コメントブロックが生成されます。これは、カスタムデフォルトパラメーター値を指定する必要がある場合に役立ちます。JSDoc 公式サイト(英語)の詳細を参照してください。

    5. 新しいパラメーターを初期化する場所を選択し、該当する場合はデフォルト値を指定します。

      • オプションのパラメーターチェックボックスが選択されている場合、パラメーターはファンクション本体のデフォルト値で初期化されます。

      • オプションのパラメーターチェックボックスをオフにすると、既定のパラメーター値が既存の関数呼び出しを介して渡されます。新しい関数シグネチャーに従ってすべての関数呼び出しが変更され、パラメーターの初期化が関数本体に追加されます。

      最初は、WebStorm はデフォルト値としてリファクタリングが呼び出される式を受け入れます。ほとんどの場合、変更する必要はありません。それでも必要な場合は、JSDoc コメントに @param <parameter name> - <default value> の形式で別のデフォルト値を指定してください。

      TypeScript オフィシャル Web サイト(英語)のオプションパラメーターとデフォルトパラメーターの詳細を参照してください。

    6. リスト内でそれをダブルクリックして提案されたパラメーター名の 1 つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら Enter を押します。

      Introduce Parameter: result

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

    上記のようにエディター(インプレースモード)でパラメーターを抽出するか、パラメーターの紹介ダイアログを使用できます。これらの 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);

    変数を導入する

    1. エディターで、変数に変換する式を選択し、Ctrl+Alt+V を押して、コンテキストメニューからリファクタリング | 変数を導入するを選択します。

      または、次のいずれかを実行します。

      • Ctrl+Alt+Shift+T を押して変数を導入するを選択します。

      • メインメニューからリファクタリング | 抽出 | 変数を選択します。

    2. 現在のカーソル位置で複数の式が検出された場合は、リストから必要な式を選択してください。

      Introduce Variable: select expression

    3. 選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換するまたは出現箇所をすべて置換を選択してください。

      Introduce Variable: multiple occurrences of the selected expression detected

      最後に、リファクタリングを設定するためのポップアップが表示されます。

    4. リストから、新しい変数の宣言に使用するステートメントを選択します。

      Introduce Variable: select the scope
    5. リスト内でそれをダブルクリックして提案されたパラメーター名の 1 つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら Enter を押します。

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

    上記のようにエディター(インプレースモード)で変数を抽出するか、変数の紹介ダイアログを使用できます。デフォルトでは、WebStorm はインプレースモードで変数導入リファクタリングを実行します。変数の導入ダイアログを使用するには、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | コード編集に移動して、リファクタリング領域でモーダルダイアログ内オプションを選択します。

    定数を導入する

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

    Introducing constants in various scopes

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

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

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

    例 1: 導入された定数 departmentName は、包含メソッド printName() 内で宣言されています

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

    例 2: 導入された定数は、包含クラス AccountingDepartment の _departmentName フィールドとして宣言されます

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

    例 3: 導入された定数 departmentName は、クラス外で宣言されています

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

    定数を導入する

    1. エディターで、定数に変換する式を選択して Ctrl+Alt+C を押すか、コンテキストメニューからリファクタリング | 定数を導入するを選択します。

      または、次のいずれかを実行します。

      • Ctrl+Alt+Shift+T を押して定数を導入するを選択します。

      • メインメニューからリファクタリング | 抽出 | 定数を選択します。

      Invoke the Introduce Constant refactoring
    2. 現在のカーソル位置で複数の式が検出された場合は、リストから必要な式を選択してください。

      Introduce Constant: select the expression
    3. 新しい定数のスコープを選択します。

      • ローカル定数は、囲むメソッド内で宣言されます。例 1 を参照してください。

      • クラスフィールドは現在のクラス内で宣言されます。例 2 を参照してください。

      • グローバルまたはモジュール定数はクラス外で宣言されます。例 3 を参照してください。

      Introduce Constant: select scope
    4. WebStorm が式の複数の出現を検出した場合、それらすべてを置き換えるか、リファクタリングが呼び出されたもののみを置き換えるかを選択します。

      Introduce Constant: multiple occurrences for global constant
    5. リスト内でそれをダブルクリックして提案されたパラメーター名の 1 つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら Enter を押します。

      Introduce Constant: select the name

    フィールドの導入

    フィールドの導入リファクタリングでは、新しいフィールドが宣言され、選択された式で初期化されます。元の式はフィールドの使用箇所に置き換えられます。

    次のコードがあるとします。

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

    フィールドを紹介する

    1. エディターで、定数に変換する式を選択して Ctrl+Alt+F を押すか、コンテキストメニューからリファクタリング | フィールドの導入を選択します。

      または、次のいずれかを実行します。

      • Ctrl+Alt+Shift+T を押してフィールドの導入を選択します。

      • メインメニューからリファクタリング | 抽出 | フィールドを選択します。

    2. WebStorm が式の複数の出現を検出した場合、それらすべてを置き換えるか、リファクタリングが呼び出されたもののみを置き換えるかを選択します。

      Extract field in TypeScript: several occurrences of an expression detected
    3. ポップアップで、新しいフィールドを初期化する場所を選択します。

      • 現在のメソッド例 1 を参照してください。

      • フィールド宣言例 2 を参照してください。

      • コンストラクター例 3 を参照してください。フィールド初期化子からリファクタリングを呼び出す場合、このオプションは無効になることに注意してください。

      Extract field in TypeScript: choose initialization
    4. フィールド宣言またはコンストラクターで初期化される場合、新しいフィールドは readonly 修飾子を使用(英語)して導入できます。これを行うには、読み取り専用にするチェックボックスを選択します。

    5. フィールドの表示を選択すると、使用可能なオプションは PublicPrivate、および Protected です。TypeScript オフィシャル Web サイト(英語)のフィールド可視性修飾子について学ぶ

    6. リスト内でそれをダブルクリックして提案されたパラメーター名の 1 つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら Enter を押します。

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

    デフォルトでは、WebStorm は、フィールドを右(インプレースモードで)エディターでリファクタリング紹介実行上記のように。

    フィールドの導入ダイアログを使用するには、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | コード編集に移動して、リファクタリング領域でモーダルダイアログ内オプションを選択します。

    Refactoring TypeScript: Introduce Field

    メソッドの抽出

    メソッドの抽出リファクタリングでは、抽出されたコードで名前付きのメソッドまたは関数を作成できます。メソッドの抽出リファクタリングが呼び出されると、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();

    関数を抽出する

    1. エディターで、関数に変換するコードフラグメントを選択し、Ctrl+Alt+M を押すか、コンテキストメニューからリファクタリング | メソッドの抽出を選択します。

      または、次のいずれかを実行します。

      • Ctrl+Alt+Shift+T を押してメソッドの抽出を選択します。

      • メインメニューからリファクタリング | 抽出 | メソッドを選択します。

    2. 選択した式が他の関数の中にある場合は、リストから宛先スコープを選択します。

      ws_ts_extract_method_choose_scope.png
      • global を選択すると、抽出された関数は関数の外部で宣言されます。上記の例 1 を参照してください。

      • 現在の囲み関数内で抽出された関数を宣言するには、関数 <現在の包含関数名> を選択してください。上の例 2 を参照してください。

    3. より多くのオプションで関数の抽出ダイアログを開くには、もう一度 Ctrl+Alt+M を押します。このダイアログでは、抽出された関数を生成された関数宣言で宣言する(英語)か、式内(英語)宣言(英語)するかを選択し、パラメーターとして渡される変数のセットを構成できます。上記の例を参照してください。

      ws_ts_extract_method_dialog.png

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

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

    タイプエイリアスの抽出

    このリファクタリングを使用して、型宣言式を型エイリアス(英語)に変換し、この式のすべての出現箇所をこのエイリアス(英語)で置き換えます。

    ws_ts_type_alias_to_interface.png

    { z: number } 型の宣言を持つコードの断片があるとします。

    function returnsObj(): { x : number, y : {z : number} } { return null } function anotherObjectReturned(): {x : number, y : {z : number} } { return null }
    以下の例では、タイプエイリアス MyNewAlias{ z: number } 型宣言から抽出されています。
    type MyNewAlias = { z : number }; function returnsObj(): { x : number, y : MyNewAlias } { return null } function anotherObjectReturned(): { x : number, y : MyNewAlias } { return null }

    型エイリアスを抽出する

    1. エディターで、タイプエイリアスに置き換える式内にキャレットを配置し、コンテキストメニューからリファクタリング | タイプエイリアスの抽出またはメインメニューからリファクタリング | 抽出 | 型エイリアスを選択します。

    2. 現在のカーソル位置で複数の式が検出された場合は、リストから必要な式を選択してください。

      ws_ts_extract_type_alias_select_type_declaration_expression.png

    3. 選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換するまたは出現箇所をすべて置換を選択してください。

      ws_ts_extract_type_alias_multiple_occurrences.png

    4. フィールドにタイプ別名の名前を入力し、準備ができたら Enter を押します。

      ws_ts_extract_type_alias_specify_name.png

    スーパークラスの抽出

    スーパークラスの抽出リファクタリングは、現在のクラスのメンバーに基づいて新しい抽象クラスを作成します。作成された抽象クラスは自動的に拡張されます。

    クラス AccountingDepartment を持っていて、そこからの printName() メソッドが再利用されることを期待しているとします。

    class AccountingDepartment { name: string; printName(): void { console.log("Department name: " + this.name); } printMeeting(): void { console.log("The Accounting Department meets each Monday at 10 a.m"); } generateReports(): void { console.log("Generating accounting reports..."); } }
    スーパークラス Department を抽出し、その中に printNameName フィールドを含めることができます。
    class Department { name: string; printName(): void { console.log("Department name: " + this.name); } } class AccountingDepartment extends Department { printMeeting(): void { console.log("The Accounting Department meets each Monday at 10 a.m"); } generateReports(): void { console.log("Generating accounting reports..."); } }

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

    1. スーパークラスを抽出するクラス内の任意の場所にキャレットを配置します。

    2. メインメニューからリファクタリング | 抽出 | スーパークラスを選択するか、コンテキストメニューからリファクタリング | スーパークラスの抽出を選択します。スーパークラスの抽出ダイアログが開きます。

    3. 新しいスーパークラスの名前を指定し、そこに含めるクラスメンバーの横にあるチェックボックスを選択します。

    4. 宛先ファイルフィールドに、新しいクラスが配置されるファイルの場所を指定します。デフォルトでは、フィールドにはリファクタリングが呼び出された現在のファイルへのパスが表示されます。

    5. スーパークラスの抽出を選択します。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..."); } }

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

    1. インターフェースを抽出するクラス内の任意の場所にキャレットを配置します。

    2. メインメニューからリファクタリング | 抽出 | インターフェースを選択するか、コンテキストメニューからリファクタリング | インターフェースの抽出を選択します。インターフェースの抽出ダイアログが開きます。

    3. 新しいインターフェースの名前を指定し、そこに含めるクラスメンバーの横にあるチェックボックスを選択します。

    4. 宛先ファイルフィールドに、新しいインターフェースが配置されるファイルの場所を指定します。デフォルトでは、フィールドにはリファクタリングが呼び出された現在のファイルへのパスが表示されます。

    5. インターフェースの抽出を選択します。WebStorm は新しいインターフェースを作成し、ソースクラスをその実装としてマークします。
      インターフェースを作成し、ソースクラスへの参照をメソッドのパラメーターのインターフェースへの参照に置き換えるには、インターフェースを抽出し、可能であれば使用するを選択します。WebStorm は、検索ツールウィンドウのリファクタリングプレビューペインに提案された変更を表示します。インスタンスがインターフェースで定義されていないメソッドまたはフィールドを参照する場合、WebStorm はそれを置き換えることを提案しないことに注意してください。

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

    構造化を使用すると、配列やオブジェクトの値を変数に簡単に展開できます。この機能には非常に簡潔な構文があり、アプリケーションにデータを渡す必要があるときによく使用されます。詳細は TypeScript オフィシャル Web サイト(英語)を参照してください。

    WebStorm では、インテンションアクションを使用して破壊を呼び出すことができます。オブジェクト / 配列の分割代入に置き換えるアクションでは、元の割り当てが削除されます。割り当てを維持するには、オブジェクト / 配列の破壊を導入するを使用します。

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

    1. 配列またはオブジェクトの値にキャレットを置き、Alt+Enter を押します。

    2. リストから、オブジェクト分割代入に置換するまたは配列分割代入に置換するを選択します。

      Destructuring with intention action: Replace with array destructuring

      配列またはオブジェクトからの値のいくつかが使用されていない場合、これらの要素はスキップされます。

      Destructuring with intention action: items skipped

    元の割り当てを保持する

    1. 配列またはオブジェクトの値にキャレットを置き、Alt+Enter を押します。

    2. リストから、オブジェクトの破壊を導入するまたは配列の破壊を導入するを選択します。

      Destructuring with intention action: Introduce array destructuring

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

    1. 関数のパラメーターにキャレットを配置し、Alt+Enter を押します。

    2. リストから、パラメーターをオブジェクトに変換するを選択します。

      Destructuring with intention action: Convert parameters to object

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

    インラインリファクタリングは抽出リファクタリングとは逆です。

    例 1: 変数のインライン化
    変数のインライン化リファクタリングは、変数または定数の冗長な使用箇所を初期化子に置き換えます。このタイプのリファクタリングは、ブロックスコープ変数と関数スコープ変数でのみ使用できます。

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

    例 2: メソッドのインライン化
    メソッドのインライン化 / 関数のインライン化リファクタリングは、メソッドまたは関数の本体をその呼び出し元の本体に配置します。メソッド / 関数自体が削除されます。
    以下の例では、Sum() の本体が Multiplication() の本体に配置されています。

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

    インラインリファクタリングを実行する

    1. エディターで、インライン化するシンボルにキャレットを置き、Ctrl+Alt+N を押すか、コンテキストメニューまたはメインメニューからリファクタリング | インライン化を選択します。

    2. 選択したシンボルに対応するインライン化ダイアログで、インラインリファクタリングを確認します。

      ws_ts_extract_variable.png

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

    シグネチャーの変更リファクタリングを使用して、関数の名前、可視性、および戻り値の型を変更し、パラメーターの追加、削除、並べ替え、および名前の変更、および呼び出しの階層を介した新しいパラメーターの伝播を行います。

    また、パラメーターの導入リファクタリングを使用してパラメーターを追加することもできます。

    以下の例では、関数 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 の種類について詳しくは、こちらを参照してください。

    関数の可視性を変更する

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

    • シグネチャーの変更ダイアログ Ctrl+F6 では、パラメーターのテーブルとその右側のボタンを使用します。

      • パラメーターを追加するには、the Add button Alt+Insert をクリックして、新しいパラメーターの名前とそのタイプを指定します。パラメーターのデフォルト値または関数呼び出しで渡される値を指定します。

        必要に応じて、現在の関数を呼び出す関数に新しいパラメーター伝達します。

      • パラメーターを削除するには、対応する行のセルのいずれかをクリックして、the Delete button Alt+Delete をクリックします。

      • パラメーターを並べ替えて、必須パラメーターがオプションパラメーターの前にリストされるようにするには、the Up button Alt+Up および the Down button Alt+Down を使用します。TypeScript オフィシャル Web サイト(英語)の必須パラメーターとオプションパラメーターの詳細を参照してください。

      • パラメーターの名前を変更するには、名前フィールドを編集します。

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

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

    2. 左側のペインで、パラメーターを伝播する機能の横にあるチェックボックスを選択し、OK をクリックします。

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

    1. シグネチャーの変更ダイアログ Ctrl+F6 で、プレビューをクリックします。

    2. 検索ツールウィンドウリファクタリングプレビュータブで、予想される変更を表示し、必要な調整を行い、準備ができたらリファクタリング実行をクリックします。

    最終更新日 :