ReSharper 2019.1ヘルプ

TypeScriptのリファクタリング

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

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

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

  2. 以下のいずれか 1 つを実行します:
    • メインメニューで、ReSharper | リファクタリング を選択し、目的のリファクタリングを選択します。このメニューで使用可能なリファクタリングのリストは、現在のコンテキストによって異なります。ReSharperがコンテキストのリファクタリングを示唆できない場合、メニュー全体が無効になります。

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

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

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

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

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

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

型のコピー

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

Copy Type refactoring in TypeScript

フィールドの導入

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

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

タイプエイリアスを導入する

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

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

インライン型エイリアス

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

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

変数を導入する

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

専用のショートカット Ctrl+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 or higher)

リファクタリング後 (TypeScript 1.3 or lower)

var helloWorld = "Hello, World";
let world = "World"; var helloWorld = `Hello, ${world}`;
var world = "World"; var helloWorld = "Hello, " + world;

変数のインライン化

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

専用のショートカット Ctrl+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 (e.g. 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を使用してこのリファクタリングを呼び出すこともできます。

タイプを別のモジュールに移動する

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

名前変更

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

Rename refactoring in TypeScript
最終更新日: 2019年7月16日

関連事項

関連ページ:

コンテキスト・アクション

コンテキストアクションのいくつかの例をReSharperWebサイトでチェックすることができます。コンテキストアクションは、エディターで直接利用できるコード変換ヘルパーです。クイックフィックスとは対照的に、コンテキストアクションは問題の解決やコードの改善を目的としているためはなく、アクセス修飾子の変...

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

ReSharperは、TypeScriptに対して以下のコンテキストアクションを提供します。可視性変更子を変更するクラスおよびモジュールメンバーの可視性を変更するフィールドをパラメータプロパティーに変換するクラスフィールドからコンストラクターパラメータとして宣言されたパラメータプロパティーを導入en...

ファイル構造ウィンドウ

ReSharper | Windows | ファイル構造ReSharperでは、ファイル構造ウィンドウを使って現在のドキュメントの構造をナビゲートすることができます。これは大きなファイルでのナビゲーションを非常に簡単にします。ウィンドウはエディターと同期しています。別のエディタータブに切り替えると、...

キーボードショートカットの設定

すべてのReSharperアクションは、キーボードショートカットで呼び出すことができます。ほとんどのアクションには既定のショートカットがあり、そのまま使用できます。残りのアクションでは、必要に応じて、好きなショートカットキーを割り当てることができます。ReSharperは2つのデフォルトのキーボード...

リファクタリングで競合を解決

ReSharperのすべてのリファクタリングはソリューション全体に適用されるため、多くのファイルが影響を受ける可能性があり、一部の変更は既存のコードと競合する可能性があります。競合がある場合、ReSharperは検出し、リファクタリングウィザードの最後のページに競合のリストを表示します。例:安全な削...

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

リファクタリングの中には、コマンドを呼び出さずに適用できるものがあります。エディターでコードを変更すれば十分です。ReSharperが、変更がコードをリファクタリングするためのインテンションである可能性があることを検出すると、変更されたコードの周囲に灰色の枠線が表示され、対応するアクションインジケー...