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

構文のハイライト

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

コード補完

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

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

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

コードの再配置

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

選択せずにこのコマンドを呼び出すと、ReSharper は可動要素を自動的に選択します。ときどき 2 つの選択が行われることがあります。この場合、1 つの選択は青でハイライトされ、もう 1 つの選択は黄でハイライトされます。例: 関数のパラメーターに対してこのコマンドを呼び出すと、ReSharper は次の 2 つの選択を行います。パラメーター自体は、他のパラメーターに対して左右に移動できます。また、関数全体を他の型のメンバーに対して上下に移動できます:

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 | 編集 | クイックドキュメントを表示するを選択します。