ReSharper 2019.3ヘルプ

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以降)

リファクタリング後 (TypeScript 1.3以前)

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

リソースに移動

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

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

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

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

名前変更

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

ReSharper: Rename refactoring in TypeScript
最終更新日: 2019年12月12日

関連ページ:

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

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

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

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

ファイル構造ウィンドウ

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

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

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

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

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

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

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