ツイートはてブ LINE Pocket

TypeScript のリファクタリング

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

シンボルにキャレットを置き、リファクタリングするコードフラグメントを選択するか、ツールウィンドウ内の項目を選択します。
以下のいずれか 1 つを実行します:
- メインメニューから ReSharper | リファクタリングを選択し、目的のリファクタリングを選択します。このメニューで使用できるリファクタリングのリストは、現在のコンテキストによって異なります。ReSharper がコンテキストのリファクタリングを提案できない場合、メニュー全体が無効になります。
- エディター、ファイル構造ウィンドウ、またはその他の ReSharper ウィンドウで、変換する項目を右クリックし、コンテキストメニューからリファクタリングを選択してから、必要なリファクタリングを選択します。
- メインメニューから ReSharper | リファクタリング | リファクタリングを選択するか、Control+Shift+R を押して、適用可能なリファクタリングのリストを表示し、そのうちの 1 つを選択します。選択項目のコンテキストメニューでリファクタリングを選択することもできます。
- 特定のリファクタリングに割り当てられているデフォルトのキーボードショートカットを使用するか、お気に入りのリファクタリングコマンドにカスタムショートカットを割り当てます。
選択したリファクタリングにユーザー入力が必要な場合は、リファクタリングウィザードが開きます。ウィザードのダイアログはモーダルではないため、ウィザードが開いている間にコードを編集できます。
リファクタリングアクションをロールバックするために、ウィザードにはオプション元に戻すを有効にするには、変更のあるすべてのファイルを編集用に開きますが用意されています。このオプションを選択すると、ReSharper は変更されたすべてのファイルを新しいエディタータブで開き、リファクタリングをロールバックできます。この場合、変更を自分で保存する必要があります。このオプションが選択されていない場合、ReSharper は変更されたファイルを開かずに自動的に保存します。
リファクタリング操作によってコードの競合 (名前の重複、可視性の競合など) が発生する場合、ウィザードはリファクタリングを適用する前の最後のステップで競合のリストを表示します。一部の競合については、ウィザードがクイックフィックスを提案することもできます。詳細については、リファクタリングの競合を解決するを参照してください。

一部のリファクタリングは、エディターでコードを変更した直後に使用できます。詳細については、インプレースリファクタリングを参照してください。

型をコピー

このリファクタリングでは、選択した型のコピーを作成し、指定されたモジュールに配置することができます。

フィールドの導入

このリファクタリングでは、選択した式に基づいて新しいフィールドを作成し、式またはコンストラクターで初期化し、現在の型の式の出現を新しく導入されたフィールドへの参照に置き換えることができます。

専用のショートカット Control+Alt+D を使用してこのリファクタリングを呼び出すこともできます。

以下の例では、このリファクタリングを使用して、同じ文字列の 2 つの出現箇所を新しい定数フィールドに置き換えます。

class ErrorHandler {

    alertError() {
        alert("Something has failed...");
    }

    logError() {
        if (typeof window.console != 'undefined') {
            console.log("Something has failed...");
        }
    }
}
                    

class ErrorHandler {
    private static errorMessage= "Something has failed...";

    alertError() {
        alert(ErrorHandler.errorMessage);
    }

    logError() {
        if (typeof window.console != 'undefined') {
            console.log(ErrorHandler.errorMessage);
        }
    }
}
                    

型エイリアスの導入

このリファクタリングにより、型の組み合わせの型エイリアスを作成し、現在選択されている組み合わせまたは現在のスコープ内のすべての類似の組み合わせをエイリアスに置き換えることができます。

このリファクタリングを呼び出すには、型の交差または結合、リテラル、エイリアス化できるその他のエンティティを選択し、Control+Shift+R を押すか、メインメニューから ReSharper | リファクタリング | リファクタリング…を選択して、リファクタリングポップアップで型エイリアスの導入を選択します。現在のコンテキストで選択したエンティティが複数出現する場合は、現在のエンティティを置き換えるか、すべてのエンティティを置き換えるかを選択できます。

型エイリアスのインライン化

このリファクタリングを使用すると、選択した型のエイリアスを削除し、すべての用途をその定義に置き換えることができます。

このリファクタリングを呼び出すには、型エイリアスの宣言または使用を選択し、Control+Shift+R を押すか、メインメニューから ReSharper | リファクタリング | リファクタリング…を選択して、リファクタリングポップアップで型エイリアスのインライン化を選択します。

変数の導入

このリファクタリングでは、選択した式に基づいて新しいローカル変数または定数を作成し、式で初期化し、最後にメソッドの式のすべてを新しく導入した変数への参照に置き換えることができます。

専用のショートカット Control+Alt+V を使用してこのリファクタリングを呼び出すこともできます。

以下の例では、このリファクタリングを使用して、同じ文字列の 2 つの出現箇所を変数に置き換えます。

function logError() {
    alert("Something has failed...");
    if (typeof window.console != 'undefined') {
        console.log("Something has failed...");
    }
}
                

function logError() {
    var message = "Something has failed...";
    alert(message);
    if (typeof window.console != 'undefined') {
        console.log(message);
    }
}
                

部分文字列に変数を導入

このリファクタリングにより、文字列の一部を別の変数にすばやく移動できます。

ReSharper オプションのコード編集 | TypeScript | インスペクションページで TypeScript 1.4 以降が言語レベルとして選択されている場合、リファクタリングは抽出された部分文字列に新しいテンプレート引数を追加します。言語レベルが TypeScript 1.3 以下の場合、文字列の連結が使用されます。

リファクタリング前	リファクタリング後 (TypeScript 1.4 以降)	リファクタリング後 (TypeScript 1.3 以前)
var helloWorld = "Hello, World";	let world = "World"; var helloWorld = `Hello, ${world}`;	var world = "World"; var helloWorld = "Hello, " + world;

変数のインライン化

このリファクタリングでは、コード内の変数のすべてをその初期化子で置き換えることができます。リファクタリングは、初期化後に変数値が変更されない場合にのみ適用される必要があることに注意してください。

専用のショートカット Control+Alt+N を使用してこのリファクタリングを呼び出すこともできます。

以下の例では、このリファクタリングを使用して reversed 変数をインライン展開します。

function reverseString(input) {
    var reversed = input.split("").reverse().join("");
    return reversed;
}
                    

function reverseString(input) {
    return input.split("").reverse().join("");
}
                    

別のファイルに移動する

このリファクタリングを使用すると、選択した型を現在のファイルから既存のファイルまたは新しいファイルに移動できます。新しいファイルに移動する場合は、新しいファイルが自動的に作成されます。現在のファイルにそれ以上型がない場合は、それを削除することができます。必要なすべてのインポートは、その型とともに移動されます。不要になったインポートはすべて元のファイルから削除されます。

フォルダーに移動

このリファクタリングにより、1 つまたは複数の型またはファイルを、ソリューションの任意の場所にある別のプロジェクトまたはフォルダーに移動できます。必要に応じて、リファクタリングが新しいターゲットフォルダーを作成します。移動した型が必要とするすべてのインポートは、新しい場所に固定されます。不要になったインポートはすべて元のファイルから削除されます。

リソースに移動

Visual Studio テンプレート (Apache Cordova など) から作成された TypeScript プロジェクトでは、ReSharper により文字列リテラルをリソースファイルに移動できます。ReSharper はオプションで、目的のスコープ内で同一の文字列をすべて検索し、リソースの使用箇所に置き換えることができます。このリファクタリングを実行するには、プロジェクト内に少なくとも 1 つのリソースファイルが必要です (通常、拡張子は .resjson です)。

専用のショートカット F6 を使用してこのリファクタリングを呼び出すこともできます。

型を別のモジュールに移動する

このリファクタリングは、選択された型の周囲にモジュール宣言をラップします。

名前変更

TypeScript では、最も時間のかかるリファクタリングの 1 つがサポートされています。シンボルの名前を変更すると、手動で変更しようとすると、多くの問題が発生する可能性があります。Rename リファクタリング（専用の F2 ショートカットでも利用可能）を呼び出すと、すべてのチェックが ReSharper によって行われます。競合が存在しない場合はすべての変更がスムーズに実行されるか、必要な適切な変更のみが行われるように手動で解決できる競合のリストが表示されます。

ReSharper: Rename refactoring in TypeScript

最終更新日: 2024 年 4 月 08 日

関連ページ：

コンテキストアクション

コンテキストアクションは、エディターで直接利用できるコード変換ヘルパーです。クイックフィックスとは対照的に、コンテキストアクションは問題の解決やコードの改善を目的としているためはなく、アクセス修飾子の変更、null をチェックするコードの生成、'foreach' の 'for' への変換などの小さな変更をすばやく導入できます。ReSharper は、サポートされているすべての言語で数百のコンテキストアクションを提供します。完全なリストは、ReSharper オプション Alt+R, O のページとコ...

構造別にファイルを移動する

ファイル構造ウィンドウ：ReSharper では、ファイル構造ウィンドウを使用して現在のドキュメントの構造を移動でき、大きなファイルでのナビゲーションが大幅に簡素化されます。ウィンドウはエディターと同期されます。別のエディタータブに切り替えると、ウィンドウには対応するファイルの構造が表示されます。ファイル構造ウィンドウを開いて使用するを押すか、メインメニューからを選択します。あるいは、を押して、ポップアップでコマンド名を入力して、そこで選択することもできます。現在のドキュメントの内容はツリー

デフォルトのキーボードショートカットスキーム

すべての ReSharper アクションは、キーボードショートカットで呼び出すことができます。ほとんどのアクションには既定のショートカットがあり、そのまま使用できます。残りのアクションでは、必要に応じて、好きなショートカットキーを割り当てることができます。ReSharper は、2 つのデフォルトのキーボードショートカットスキームを提供します。Visual Studio — このスキームは、Visual Studio 独自のキーボードショートカットとの競合を最小限に抑えることを目的としています。I...

キーボードショートカットを設定する

リファクタリングの競合を解決する

ReSharper のすべてのリファクタリングはソリューション全体に適用されるため、多くのファイルが影響を受ける可能性があり、一部の変更は既存のコードと競合する可能性があります。競合がある場合、ReSharper はそれらを検出し、リファクタリングウィザードの最後のページに競合のリストを表示します。例: 安全な削除リファクタリングをメソッドに適用するときに表示されるいくつかの競合を次に示します。競合には 2 つの型があります。コンパイルを中断することなく削除できる使用箇所は、アイコンでマークされて...

インプレースリファクタリング

一部のリファクタリングは、コマンドを呼び出さずに適用できます。エディターでコードを変更するだけで十分です。変更がコードをリファクタリングするためのインテンションである可能性があることを ReSharper が検出すると、変更されたコードの周囲に灰色の境界線が表示され、対応するアクションインジケーターが左側に表示されます。このアクションを使用して、ソリューション全体にリファクタリングを適用できます。以下のリファクタリングがその場で利用可能です: 名前変更：エディターで宣言の権利を変更し、クイックフ...