ReSharper 2020.3 ヘルプ

TypeScript のリファクタリング

ReSharper は、TypeScript に対して次のリファクタリングを提供します。

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

  1. キャレットをシンボルに設定するか、リファクタリングするコードフラグメントを選択するか、ツールウィンドウで項目を選択します。

  2. 以下のいずれか 1 つを実行します:

    • メインメニューで ReSharper | リファクタリングを選択してから、必要なリファクタリングを選択します。このメニューで利用可能なリファクタリングのリストは現在の状況に依存します。ReSharper がコンテキストのリファクタリングを提案できない場合は、メニュー全体が無効になります。

    • エディター、ファイル構造ウィンドウ、またはその他の ReSharper ウィンドウで、変換したい項目を右クリックし、コンテキストメニューからリファクタリングを選択してから、必要なリファクタリングを選択します。

    • メインメニューで ReSharper | リファクタリング | リファクタリングを選択するか、Control+Shift+R を押して適用可能なリファクタリングのリストを表示し、それらのいずれかを選択します。選択のコンテキストメニューでリファクタリングを選択することもできます。

    • 特定のリファクタリングに割り当てられているデフォルトのキーボードショートカットを使用するか、お気に入りのリファクタリングコマンドにカスタムショートカットを割り当てます。

  3. 選択したリファクタリングにユーザー入力が必要な場合は、リファクタリングウィザードが開きます。ウィザードのダイアログはモーダルではないため、ウィザードが開いている間にコードを編集できます。

    リファクタリングアクションをロールバックするために、ウィザードにはオプション元に戻すを有効にするには、変更のあるすべてのファイルを編集用に開きますが用意されています。このオプションを選択すると、ReSharper は変更されたすべてのファイルを新しいエディタータブで開き、リファクタリングをロールバックできます。この場合、変更を自分で保存する必要があります。このオプションが選択されていない場合、ReSharper は変更されたファイルを開かずに自動的に保存します。

  4. リファクタリング操作によってコードの競合(名前の重複、可視性の競合など)が発生する場合、リファクタリングを適用する前に、ウィザードは最後のステップで競合のリストを表示します。一部の競合については、ウィザードでクイックフィックスを提案することもできます。詳細については、リファクタリングの競合を解決するを参照してください。

エディターでコードを変更した直後に利用できるリファクタリングもあります。詳しくは、インプレースリファクタリングを参照してください。

型をコピー

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

Copy Type refactoring in TypeScript

フィールドの導入

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

専用のショートカット 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); } } }

型エイリアスの紹介

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

To invoke this refactoring, select a type intersection or union, a literal, or other entity that can be aliased and press Control+Shift+R or choose ReSharper | リファクタリング | リファクタリング… from the main menu, and then select 型エイリアスを導入する in the リファクタリング popup. If there are multiple occurrences of the selected entity in the current context, you will be able to choose whether to replace the current entity or all entities.

インライン型エイリアス

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

To invoke this refactoring, select a declaration or usage of a type alias, and press Control+Shift+R or choose ReSharper | リファクタリング | リファクタリング… from the main menu, and then select インライン型エイリアス in the リファクタリング popup.

変数の導入

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

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

リソースに移動

In TypeScript projects created from Visual Studio templates (for example Apache Cordova), ReSharper allows moving string literals to resource files(英語). ReSharper can optionally find all identical strings in the desired scope and replace them with the resource usage. To perform this refactoring, you need to have at least one resource file in your project (it normally has the .resjson extension).

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

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

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

名前変更

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

ReSharper: Rename refactoring in TypeScript

関連ページ:

コンテキストアクション

コンテキストアクションのいくつかの例を ReSharperWeb サイトでチェックすることができます。コンテキストアクションは、エディターで直接利用できるコード変換ヘルパーです。クイックフィックスとは対照的に、コンテキストアクションは問題の解決やコードの改善を目的としているためはなく、アクセス修飾子の変更、null をチェックするコードの生成、'foreach' の 'for' への変換などの小さな変更を素早く導入できます。コードベースのより大きな変換のために、ReSharper は数十の自動化さ...

TypeScript のコンテキストアクション

ReSharper は、TypeScript に対して以下のコンテキストアクションを提供します。可視性変更子を変更するクラスおよびモジュールメンバーの可視性を変更するフィールドをパラメータープロパティに変換するクラスフィールドからコンストラクターパラメーターとして宣言されたパラメータープロパティを導入 enum のために 'if' を 'switch' に変換しますその後、変数が列挙型の値を持つ if でチェックされた場合、その変数はスイッチで置き換えられますラムダ式によって割り当てられたメンバー...

ファイル構造ウィンドウ

ReSharper では、ファイル構造ウィンドウを使用して現在のドキュメントの構造をナビゲートできます。これにより、大きなファイルでのナビゲーションが大幅に簡略化されます。ウィンドウはエディターと同期しています。別のエディタータブに切り替えると、ウィンドウに対応するファイルの構造が表示されます。ファイルを簡単にナビゲートするために、プリプロセッサーディレクティブはデフォルトで非表示になっています。ファイルメンバーには、ReSharper オプションのページで設定できるシンボルアイコンがマークされ...

キーボードショートカットを構成する

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

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

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

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

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