WebStorm 2018.3ヘルプ

TypeScript のリファクタリング

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

移動リファクタリング

Besides moving files and folders, WebStorm lets you move TypeScript top-level symbols. The シンボルの移動リファクタリング works for classes, functions, and variables in ES6 modules.

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

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

  2. F6 を押すか、メインメニューまたは選択項目のコンテキストメニューでリファクタリング | 移動を選択します。モジュール・メンバーの移動ダイアログが開きます。

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

例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. メソッドをプルアップするには、引き上げるメンバーリストでそのメソッドの横にあるチェックボックスを選択します。該当する場合は、移動するメソッドの横にある抽象にするチェックボックスを選択します。

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

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

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

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

  2. 開いている名前変更ダイアログに、シンボルの新しい名前を入力します。

  3. オプション:
    • コメントと文字列内を検索文字列の使用箇所を検索のチェックボックスを選択して、コメント、文字列リテラル、ドキュメント、HTML、およびプロジェクトに含まれる他のファイルの関数またはクラスの使用方法を変更します。

    • 生成されたJavaScriptコードの関数またはクラスの名前を変更するには、JavaScriptリファレンスを検索チェックボックスを選択します。

  4. 必要に応じて、変更をプレビューして適用します

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

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

  2. 選択したパラメータの周囲に赤いキャンバスが表示されたテキストボックスに、新しいパラメータ名を入力します。

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

クラスの名前を保持し、準拠してファイルを格納する

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

この提案を拒否した場合は、後でいつでもファイルの名前変更... インテンションアクションを使用してファイルの名前を変更できます。これは、新しいファイルを作成したばかりのときに、クラスやインターフェースを入力するときに、より良い名前が表示された場合に便利です。別のインテンションアクションは、クラスを対応する名前の新しいファイルに移動することを提案します。推奨ファイル名のフォーマットは、コード・スタイル: JavaScriptページのファイル名規約リストから選択したスタイルによって決まります。

対応するクラスの名前に従ったファイル名を保持するには

  1. カーソルをクラス名に置き、 Alt+Enterを押します。

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

    ws_ts_refactoring_rename_file_intention_custom_naming_convention.png

抽出リファクタリング

WebStormは、パラメータ、変数、定数、フィールド、メソッド、関数を導入するためのさまざまな抽出リファクタリングを提供します。これらのリファクタリングを実行するには、リファクタリングする式を選択し、リファクタリング | 抽出 | <target>を選択します。式全体を選択するか、カーソルをその中の任意の場所に置くことができ、WebStormが選択に役立ちます。

パラメーターの導入

パラメーターの導入リファクタリングを使用して、関数呼び出しの式をパラメータで置き換えます。WebStormは、それに応じて関数の宣言と呼び出しを更新します。新しいパラメータのデフォルト値は、関数本体の中で初期化することも、関数呼び出しを渡すこともできます。

関数 greeter()にハードコードされた "Hello, " を持つコードがあるとします。

function greeter(firstName : String, lastName : String) { return "Hello, " + firstName + " " + lastName; } document.body.innerHTML = greeter("Jane","User");
With the Extract Parameter refactoring, you can replace this hardcoded "Hello, " with a greeting parameter. The new greeting parameter can be extracted as オプション or as required .

例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 を押すか、リファクタリング | 抽出 | パラメーターを選択します。

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

    ws_ts_extract_parameter_select_expression.png

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

    ws_ts_extract_parameter_specify_parameter_name_and_type.png

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

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

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

    最初に、WebStormはリファクタリングがデフォルト値として呼び出された式を受け入れます。ほとんどの場合、変更する必要はありません。それでも必要な場合は、JSDocコメントに別のデフォルト値を @param <parameter name> - <default value>の形式で指定します。
  6. 提案されたパラメータ名の1つをポップアップリストでダブルクリックするか、赤いキャンバスでテキストボックスにカスタム名を指定して受け入れます。準備ができたら Enter を押します。

    ws_ts_extract_parameter_result.png

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

You can extract a parameter right in the editor (in the in-place mode) as described above or use the パラメータ抽出ダイアログ . These two approaches are rather similar, the difference is as follows:

  • リファクタリングの結果をプレビューします
    ダイアログボックスで、プレビューをクリックし、検索ツールウィンドウの専用タブで期待される変更を調べることができます。インプレースモードでは、この機能は使用できません。

  • デフォルトのパラメータ値の指定
    ダイアログボックスで、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 を押すか、リファクタリング | 抽出 | 変数を選択します。

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

    ws_ts_refactoring_extract_variable_inplace_select_expression.png

  3. 選択した式が複数見つかった場合は、複数の出現箇所が見つかりましたポップアップメニューでこの出現箇所だけを置換するまたは出現箇所をすべて置換を選択します。

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

  4. ポップアップメニューで、新しい変数の宣言で使用するステートメントを選択します。
    ws_ts_refactoring_extract_variable_inplace_choose_scope_type.png
  5. 提示された変数名の1つをポップアップリストでダブルクリックするか、テキストボックスにカスタム名を指定して受け入れます。準備ができたら Enter を押します。

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

You can extract a variable right in the editor (in the in-place mode) as described above or use the 変数の抽出ダイアログ . By default, WebStorm runs the Extract Variable refactoring in the in-place mode. To use the 変数の導入 dialog box, In the 設定/環境設定 dialog ( Ctrl+Alt+S ), click エディター | 一般 . On the 一般ページ that opens, clear the インプレース・モードを使用可能にする checkbox in the リファクタリング area.

フィールドの導入

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

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

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: 囲みメソッドget()で初期化された抽出フィールド_calcAreaisは

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 を押すか、リファクタリング | 抽出 | フィールドを選択します。

  2. 開いているフィールドの抽出ダイアログの場合:
    • フィールド名と(英語)を指定します。

    • 新しいフィールドをどこで初期化するかを選択します。使用できるオプションは次のとおりです。
      • 現在のメソッド例1を参照してください。

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

      • クラス・コンストラクター例3を参照してください。

    • Choose the field visibility, the available options are パブリック , プライベート , and Protected . Learn about field visibility modifiers from the TypeScript(英語) official website

    ws_ts_extract_field_dialog_1.png

メソッドの抽出

メソッドの抽出リファクタリングでは、抽出されたコードで名前付きのメソッドまたは関数を作成できます。メソッドの抽出リファクタリングが呼び出されると、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: 閉じたメソッドの中で宣言付きのメソッドを抽出する
この例では、メソッド NewMethod()let c = a + b; 式から抽出されます。宛先範囲 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 を押すか、リファクタリング | 抽出 | メソッドを選択します。

  2. 選択した式が別の関数内にある場合は、ポップアップリストから目的のスコープを選択します。
    ws_ts_extract_method_choose_scope.png
    • グローバルを選択すると、抽出された関数は任意の関数の外で宣言されます。上記の例1を参照してください。

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

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

    ws_ts_extract_method_dialog.png

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

  • 設定/環境設定ダイアログ(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 }; unction returnsObj(): { x : number, y : MyNewAlias } { return null unction 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はそれを置き換えることを提案しません。

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

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

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

function Multiplication(a : number, b : number) { let с = a + b; let d = (с) * (с); 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);

Change Signatureを呼び出すには

  • エディタでリファクタリングする関数名にカーソルを置き、コンテキストメニューまたはメインメニューで Ctrl+F6 を押すかリファクタリング | シグネチャーの変更を選択します。シグネチャーの変更ダイアログが開きます。

関数の名前を変更するには

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

関数の戻り値の型を変更するには

  • 戻りの型フィールドに、関数が返す値の型を指定します。フィールドが空の場合、戻り値の型は voidとして扱われます。TypeScript(英語)公式サイトの返品タイプについての詳細をご覧ください。

関数の可視性を変更するには

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

  • シグネチャーの変更ダイアログ(Ctrl+F6)で、パラメータの表とその右側のボタンを使用します。
    • パラメータを追加するには、 icons general add svgAlt+Insert)をクリックし、新しいパラメータの名前とそのタイプを指定します。パラメータのデフォルト値または関数呼び出しで渡す値を指定します。

    • パラメータを削除するには、対応する行のいずれかのセルをクリックし、 icons general remove svgAlt+Delete)をクリックします。

    • パラメータの順序を変更するには、必要なパラメータがオプションのパラメータの前にリストされるように、 icons actions previousOccurence svgAlt+Up)および icons actions nextOccurence svgAlt+Down)を使用します。TypeScript(英語)公式サイトの必須パラメータとオプションパラメータの詳細をご覧ください。

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

コールの階層に沿ってパラメータを伝播するには

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

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

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

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

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

最終更新日: 2018年12月12日

関連事項