TypeScript のコーディングアシスタンス

構文ハイライト

ReSharper は *.ts および *.d.ts ファイルを認識し、事前定義された色に従ってそのようなファイル内のソースコードをハイライトします。 色とフォントはいつでも変更できます。 詳細については、 フォントと色を構成する を参照してください。

コード補完

通常どおり、コード補完機能を使用してコードの記述を容易にすることができます。 TypeScript はオブジェクト指向プログラミング言語であるため、型とメンバーを定義できます。 例: ReSharper は、 this キーワードの後に現在のインスタンスのメンバーを提案します。

ReSharper は正しい抽象化レベルも考慮に入れています。 以下の例を考えてみましょう。 Vector オブジェクトの新しいインスタンスが初期化された後、ReSharper は補完リスト内の使用可能なすべてのメンバーを表示します。

minus と plus メソッドは公開されているため、それらはリストにあります。 times メソッドはプライベートなので、リストから除外されています。

コードの再配置

コードを並べ替えるには、移動したいコード要素または選択範囲上で Ctrl＋Shift＋Alt を押します。 要素を移動することが理にかなっている場合、ReSharper は可能な移動オプションを持つツールチップを表示します。

選択せずにこのコマンドを呼び出すと、ReSharper が可動要素を自動的に選択します。 場合によっては選択範囲が２つ作られます。 この場合、一方の選択は青色で、もう一方は黄色でハイライトされます。 例えば、関数のパラメーター上でこのコマンドを実行すると、ReSharper は２つの選択範囲を作成します：１つは他のパラメーターに対して左右に移動可能なパラメーター自体、もう１つは他の型メンバーに対して上下に移動できる関数全体です：

ReSharper では、次の方法で要素を移動できます：

• 型と型メンバー。

  • 現在のファイル内または包含する宣言内での型の上下

  • 左右のベースタイプ

  • 型パラメーター left と right

  • 宣言内のパラメーターおよび関数の使用箇所内の引数左右

• 関数

  • 現在のファイル内または別の関数内での上下

  • 宣言のパラメーターと左右の関数の使用箇所

• ステートメント

  • 左辺と右辺の代入文の一部

  • 関数内または複合語内のステートメント

  • 複合文からの文（左）、または直後の複合文への文 (右揃え)

  • switch ステートメント内のセクションを上下に切り替えます

  • 複合ステートメントの右波括弧を上下に移動（グリーディ波括弧）。 右波括弧を移動するには、波括弧の外側にキャレットを置いて Ctrl＋Shift＋Alt を押し、上下の矢印キーで現在の複合文の後に続くステートメントをその内部に含めたり、最後のステートメントを外に移動したりします。

• 式

  • 左と右の式のオペランド

  • コレクションの要素と配列の初期化の左右

• その他の要素

  • 左と右のテンプレート文字列の引数

  • 行と C スタイルのコメントを上下に

コンテキストアクション

ReSharper は、TypeScript コードをターゲットとした コンテキストアクションのセットを提供します。 ReSharper オプションの コード編集 | TypeScript | コンテキストアクションページで、これらのアクションの全リストを確認できます。 必要に応じて、このページを使用して一部のアクションを無効にすることもできます。

現在のキャレット位置でコンテキストアクションが利用可能になると、ReSharper は対応する アクションインジケーター をキャレットの左側に表示します。 ただし、ReSharper が現在のキャレット位置で複数のコンテキスト関連の機能を提供する場合もあります。 この場合、最も優先度が高いアクションに対応するアクションインジケーターが表示され、他のすべてのアクションはアクションインジケーターをクリックするか Alt+Enter を押して アクションリストを展開したときにのみ表示されます。コンテキストアクションは優先度が最も低いため、アクションリストの下部に表示されることが多いです。

TypeScript のコンテキストアクションの例をいくつか示します。

使用箇所から作成

シンボルの宣言は、対応するコンテキストアクションによって実際に使用された後に作成できます。

あるいは、まだ存在していないデータ型を使用し、後で次のコンテキストアクションを使用して宣言することもできます。

インポートタイプ

他の場合には、新しいエンティティを作成する必要はありません。 たとえば、既存のものを使用したいが、まだ考慮していない唯一のものが可視性スコープです。

正規表現のアシスタンス

ReSharper は、正規表現の構文構造、エラー、冗長性もハイライトします：

ハイライトの色は、次の意味を持ちます。

• ライトブルー - 文字クラス、アンカー、数量子

• ライトグリーン - グループ化構成要素

• オレンジ色の構成要素

• ピンクとライトピンク - エスケープシーケンス

• 赤い波線の下線付き - エラー

区切り文字の 1 つにキャレットを設定すると、角括弧のグループ、マッピング、グループ名、セットがハイライトされます。 ReSharper オプションの 環境 | エディター | 外観 ページにある 一致する区切り文字をハイライトする 設定で、このハイライトを切り替えたり調整したりできます。

デフォルトで、ReSharper はすべての文字列内の正しいエスケープシーケンスと誤ったエスケープシーケンスをハイライトします：

およびテンプレート文字列:

必要に応じて、ReSharper オプションの コードインスペクション | 設定 ページで 文字列リテラルの特殊文字をハイライトする チェックボックスをオフにして、このハイライトを無効にできます。

ReSharper は、ほぼすべての TypeScript 正規表現構成要素に対して IntelliSense サポートも提供します。 補完リストでは、各構成要素が簡単な説明とともに表示されます。

基本補完 Control+Space を呼び出して、現在のスコープで使用可能な要素を表示できます。

JSDoc でのコーディング支援

ReSharper はコード内の JSDocコメントを理解し、それらの操作をサポートします。 まず、ReSharper は JSDoc コメントの構文をハイライトし、可読性を大幅に向上させます。

JSDoc コメントを入力するとき、ReSharper は入力の補完を支援します。 例えば、関数の上に /** を入力すると、ReSharper がすべてのパラメーターと戻り値用のドキュメントスタブを生成し、コメント内の関数説明の入力開始位置にキャレットを配置します。 先頭に @ を付けずに JSDoc キーワードの入力を開始することもできます。

関数パラメーターに Rename リファクタリング を適用すると、ReSharper は JSDoc の対応する項目名も変更します。

関数に JSDoc コメントがある場合、それらは パラメーター情報 ツールチップおよび クイックドキュメントポップアップで利用できます。

クイックドキュメント

ReSharper を使用すると、エディター内で TypeScript シンボルのドキュメントをすばやく確認できます。 JSDoc コメントは クイックドキュメントツールチップに表示されます。 すべてのタグはセクションとして表示されます。

シンボルのドキュメントを表示するには、キャレットを配置して Control+Q を押すか、メインメニューで ReSharper | 編集 | クイックドキュメントを表示する を選択します。