言語およびフレームワーク：TypeScript
JetBrains Rider は .ts および .tsx ファイルを認識し、追加の手順を必要とせずにそれらを編集するためのコーディング支援を提供します。 TypeScript ファイルは、 
アイコン。
TypeScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の 補完、 エラーと構文のハイライト 、フォーマット、 多数のコードインスペクションと クイックフィックス 、および 一般的で TypeScript 固有リファクタリングが含まれます。 JetBrains Rider はまた、オンザフライで TypeScript コードを検証し、専用の 問題ツールウィンドウでエラーを表示します。
コンパイルエラーは TypeScript ツールウィンドウで報告されます。 TypeScript を JavaScript にコンパイルから詳細をご覧ください。
始める前に
設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 プラグイン管理を参照してください。
TypeScript を確認する
JetBrains Rider は主に TypeScript 言語サービス のデータに基づいて TypeScript コードを検証し、TypeScript を JavaScript にコンパイルします。
現在のファイルで検出されたエラーの説明とそれらのクイックフィックスは、エディターから入手できます。
現在のファイルで TypeScript を確認する
エディターで、ハイライトされた問題の上にマウスを置きます。 JetBrains Rider は、問題の説明を含むツールチップを表示します。
提案されたクイックフィックスを適用するか、 その他のアクション… をクリックして、リストから関連するものを選択します。
または、 問題 ツールウィンドウ Alt+6 の ファイル タブを開くと、問題の説明を表示したり、クイックフィックスを適用したり、エラーが発生したソースコードのフラグメントに移動したり、ツールウィンドウを移動せずに エディタープレビュー ペインでエラーを修正したりできます。 詳細については、 問題ツールウィンドウをご覧ください。
TypeScript 言語サービスとの統合を構成する
ほとんどの場合、すべてそのまま動作し、手動設定は必要ありません。 ただし、カスタム typescript パッケージを使用したり、 コマンドラインオプション(英語)を TypeScript 言語サービスに渡したりする場合は、デフォルト設定をカスタマイズできます。
設定 ダイアログ (Ctrl+Alt+S) で、 に進みます。
または、 ステータス バーの 言語サービス ウィジェットをクリックしてから、
をクリックします。
TypeScript ページが開きます。
使用する Node.js ランタイムを指定します。
プロジェクト エイリアスを選択すると、JetBrains Rider は ノードランタイム フィールドがある JavaScript ランタイムページのプロジェクトデフォルトインタープリターを自動的に使用します。 ほとんどの場合、JetBrains Rider はプロジェクトのデフォルトランタイムを検出し、フィールドに自動入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。TypeScript フィールドで、使用する TypeScript のバージョンを指定します（JetBrains Rider は現在選択されているバージョンを表示します）。
デフォルトでは、プロジェクトの node_modules フォルダーにある
typescriptパッケージが使用されます。バンドル： このオプションを選択すると、JetBrains Rider に同梱されている
typescriptパッケージが利用され、他のものを探しません。選択： このオプションを選択すると、JetBrains Rider にバンドルされているものではなく、カスタム
typescriptパッケージを使用できます。 開いたダイアログで、関連するパッケージへのパスを選択します。プロジェクトパッケージマネージャーが Yarn 2(英語) の場合、Yarn 2 を介してインストールされた
typescriptパッケージを使用する必要があります。 この場合、デフォルトでyarn:package.json:typescriptが選択されています。npm と Yarn のパッケージマネージャーの詳細を参照してください。
TypeScript 言語サービス チェックボックスが選択されていることを確認してください。 結果:
構文とエラーのハイライトは、TypeScript 言語サービスからのアノテーションに基づいています。
補完リストには、TypeScript 言語サービスからの提案と JetBrains Rider によって計算された提案の両方が含まれます。
TypeScript コードは JavaScript にコンパイルされます。
以下のコントロールを使用して、TypeScript 言語サービスの動作を構成します。
プロジェクトエラーの表示 - このチェックボックスはデフォルトでオンになっており、TypeScript 言語サービスはプロジェクト全体のコードをチェックします。 検出されたエラーは、 プロジェクトエラー タブの ツールウィンドウ：Problems に、発生したファイルごとにグループ化されて一覧表示されます。
パフォーマンスの問題を回避するには、 プロジェクトエラーの表示 チェックボックスをオフにして、TypeScript 言語サービスがファイルを開いたときにのみファイルをチェックするようにします。 そうすることで、 プロジェクトエラー タブには、すでに開いたファイルで検出されたエラーのみが一覧表示されます。
候補の表示 - デフォルトでは、このチェックボックスは選択されており、JetBrains Rider は実際のエラーに加え、TypeScript 言語サービスがコードで検出した潜在的な問題も表示します。
サービス駆動型タイプエンジンを有効化 - TypeScript コンパイラーのデータに基づいてシンボルの種類を評価するには、このチェックボックスを選択します。
デフォルトでは、チェックボックスはオフになっており、型評価、解決、コードインスペクション、リファクタリングは JetBrains Rider 内部 TypeScript エンジンの型情報に基づいて行われます。
このデフォルトの動作では、JetBrains Rider 内部の TypeScript エンジンが使用する型評価アルゴリズムが TypeScript コンパイラーのアルゴリズムと異なるため、パフォーマンスの問題や型解決のバグが発生する可能性があります。 チェックボックスをオンにすることで、これらの問題を回避できる場合があります。
オプション フィールドには、 tsconfig.json ファイルが見つからない場合に TypeScript 言語サービスに渡すコマンドラインオプションを指定します。 使用可能なオプションのリストは TSC 引数(英語)を参照してください。
-wまたは--watch（入力ファイルを見る ）オプションは無関係です。
TypeScript 言語サービスを再起動する
ステータス バーの 言語サービス ウィジェットをクリックし、次に
をクリックします。
エラーメッセージをローカライズする
設定 ダイアログ (Ctrl+Alt+S) で、 に進みます。
TypeScript フィールドで、 バンドル とは異なる
typescriptパッケージを指定します。 これは、プロジェクトのnode_modulesフォルダーや他の場所のtypescriptパッケージでもかまいません。「オプション 」フィールドに
--locale <abbreviation of the language to use>と入力します。 現在、韓国語 (ko) と日本語 (ja) がサポートされています。
自動インポート
JetBrains Rider は、モジュール、クラス、コンポーネント、エクスポートされるその他のシンボルに対してインポートステートメントを生成することができます。 インポートステートメントは、シンボルを入力、貼り付け、完了する際にその場で追加することも、インポートツールチップ、クイックフィックス、またはインテンションアクションを使用して後から追加することもできます。
設定 ダイアログ（Ctrl+Alt+S ）で、 に移動します。 自動インポートページが開きます。
TypeScript/JavaScript 領域で、 TypeScript のインポートを自動的に追加する および 明確なインポートをオンザフライで追加 チェックボックスが選択されていることを確認します。
設定 ダイアログ（Ctrl+Alt+S ）で、 に移動します。 自動インポートページが開きます。
TypeScript/JavaScript 領域で、 TypeScript のインポートを自動的に追加する および コード補完時に実行 チェックボックスが選択されていることを確認します。
補完や編集時に TypeScript シンボルのインポートステートメントが追加されなかった場合、JetBrains Rider はそのシンボルのインポートを提案するツールチップを表示します。 提案を受け入れるには、 Alt+Enter を押してください
インポート可能なソースが複数ある場合、JetBrains Rider はその旨を通知します：
この場合、 Alt+Enter を押すと、提案のリストが開きます:
自動インポートのツールチップを非表示にするには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、 自動インポートツールチップを使用 チェックボックスをオフにします。
自動インポートツールチップの背景色を変更するには、 Ctrl+Alt+S を押して に移動します。
自動インポートツールチップが表示されない場合は、いつでも Alt+Enter を押して、クイックフィックスを介してインポートステートメントを追加できます。
インポートを生成するには、 インポート元を挿入 を選択します。
インポートするシンボルのソースが 1 つだけの場合、JetBrains Rider はインポートステートメントを生成します：
シンボルのインポート元が複数ある場合は、候補リストから該当するものを選択してください：
プロジェクトで TypeScript 言語サービスが有効になっている場合は、その提案も使用できます。
import ステートメントでの type 修飾子の使用を構成する
Ctrl+Alt+S を押して設定を開き、 を選択します。
インポート タブに切り替え、 インポートで型修飾子を使用する フィールドで、タイプのインポートステートメントでの
type修飾子の使用を構成します。 この設定はタイプにのみ適用され、どのオプションを選択しても、タイプ以外にはtype修飾子は挿入されないことに注意してください。このオプションを使用すると、 tsconfig.json で 「importsNot UsedAsValues」: " エラー "(英語) または 「逐語的モジュール構文」: true(英語) が指定されている場合に
type修飾子が追加されます。それ以外の場合、優先されるインポートタイプがない場合、
type修飾子は挿入されません。
このオプションを使用すると、 tsconfig .json で 「importsNot UsedAsValues」: " エラー "(英語) または 「逐語的モジュール構文」: true(英語) が指定されているかどうかに関係なく、常に
type修飾子が挿入されます。
このオプションを使用すると、 tsconfig.json の "importsNotUsedAsValues": "error" または "verbatimModuleSyntax": true フラグに関係なく、JetBrains Rider は
type修飾子を使用しません：
type 修飾子を含む import ステートメントがすでに存在する場合、この修飾子は、選択したオプションや tsconfig.json の設定に関係なく、型をさらにインポートするために常に使用されます。
定数については、 type 修飾子の代わりに {<constant name>} 指定子が使用されます。 TypeScript 4.5 以降で 自動 または 常に が選択されている場合、以前のすべての修飾子は {type} 指定子に変換されます。 それ以外の場合は、既存のすべての指定子は変更されません。
TypeScript オフィシャル Web サイト(英語)の詳細を参照してください。
インポートステートメントの外観を構成する
設定 ダイアログ（Ctrl+Alt+S ）で、 に移動し、 インポート タブのコントロールを使用します。
ドキュメントの検索
JetBrains Rider は TypeScript がすべて実装しているため、プロジェクトや依存関係、外部ライブラリで定義されたシンボルや標準 JavaScript API のシンボルを参照できます。
デフォルトでは、ドキュメントは ドキュメント ポップアップに表示されますが、 ドキュメントツールウィンドウで開くことも、デフォルトで ドキュメントツールウィンドウ に表示されるよう設定することもできます。
クイックドキュメントを見る
エディターで必要なシンボルの上にマウスを合わせてください。
あるいは、シンボルにキャレットを置き、 Ctrl+Q を押すか、メインメニューから を選択します。
デフォルトで ドキュメント ツールウィンドウでクイックドキュメントを開くには、ポップアップまたはツールウィンドウのツールバーで
をクリックし、 ドキュメントのポップアップを前に表示 オプションをオフにします。ポップアップで
をクリックしてフォントサイズを変更するか、クイックドキュメントツールバーを表示するか、ソースコードに移動します。
ツールウィンドウで特定のコード要素のドキュメントを開き、現在のファイルの他の要素のドキュメントを表示し続けることができます。
ツールウィンドウでは、コードドキュメントが固定されていないタブ（アスタリスクシンボル（* ）でマークされたタブ）に表示されます。 このドキュメントを表示するには、シンボルにカーソルを合わせるか、キャレットを配置します。
キャレットのシンボルの MDN ドキュメントを表示する
TypeScript で利用可能な標準の JavaScript メソッドの場合、JetBrains Rider は対応する MDN 記事 へのリンクも表示します。
ドキュメント ウィンドウ Ctrl+Q で、MDN リンクをクリックします。
または、 Shift+F1 を押すか、メインメニューから を選択します。
JetBrains Rider は、 デフォルトの JetBrains Rider ブラウザー で MDN 記事を開きます。
インレイヒントを見る
インレイヒントはエディターに表示され、コードの可読性とナビゲーションを高めるための追加情報を提供します。
インレイヒントは、 .ts および .tsx ファイルで使用できます。
TypeScript 言語サービスが有効になっていて、TypeScript バージョンが 4.4 以上の場合、インレイヒントは TypeScript 言語サービスから取得されます。
以前の TypeScript バージョンの場合や TypeScript 言語サービスが無効な場合、インレイヒントは内部の JetBrains Rider 評価機から取得されます。
常にファイル全体を分析する多くのインスペクションやハイライトとは異なり、ヒントは現在表示されている領域のみ取得され、スクロール時に更新されます。 この動作は、より高いパフォーマンスを目的としています。
パラメーターヒント
パラメーターヒントは、コードを読みやすくするためのメソッドや関数のパラメーター名を示します。
TypeScript バージョン 5.2 以降では、パラメーターヒントはホバーするとリンクに変わります。 Ctrl を押した状態でこのようなリンクをクリックすると、メソッド定義が表示されます。
パラメーターのヒントを設定する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
パラメーター名 の TypeScript を展開します。
対応するチェックボックスを選択して、パラメーターヒントを表示するコンテキストを指定します。
プレビューでは、設定を変更することでコードの見た目にどのような影響があるかを確認できます。
任意のコンテキストで任意の値型のパラメーターヒントを非表示にするには、 パラメーター名 の TypeScript チェックボックスをオフにします。
戻り型のヒント
JetBrains Rider は関数呼び出しや呼び出しチェーンで関数の戻り値の型を表示できます。
関数の戻り値のヒントは TypeScript 言語サービスから取得されます。
メソッドチェーンで型ヒントを返すは、メソッド呼び出しが複数行に分かれており、少なくとも 2 つの異なる型を返す場合に表示されます。
メソッドチェーンの戻り値の型ヒントは、内部の JetBrains Rider の評価機能によって提供されます。
関数の戻り値のヒントを構成する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
タイプ で TypeScript ノードを展開し、 関数の戻り値の型 チェックボックスをオンにします。
メソッドチェーンで戻り値の型のヒントを表示するには、 メソッドチェーン ノードを展開し、 TypeScript チェックボックスを選択します。
プレビューでは、設定を変更することでコードの見た目にどのような影響があるかを確認できます。
型ヒント
型ヒントは、変数、フィールド、パラメーターの型を示します。 変数とフィールドの型は、その定義の横に表示されます。 パラメーターの型ヒントは関数呼び出しに表示されます。 型ヒントは JSDoc コメントまたはコードの静的解析から推論されます。
TypeScript バージョン 5.3 以降では、マウスをホバーするとタイプヒントがリンクに変わります。 Ctrl を押しながらこのようなリンクをクリックすると、型定義が表示されます。
型ヒントを構成する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
を展開します。
型ヒントを表示するコンテキストを指定してください。
プレビューでは、設定を変更することでコードの見た目にどのような影響があるかを確認できます。
任意のコンテキストで任意の値の型のパラメーターの型と戻り値の型のヒントを非表示にするには、 タイプ の TypeScript チェックボックスをオフにします。
数値列挙型の値
JetBrains Rider はコードを読みやすくするために、 数値列挙型 のヒントを表示します。 これらのヒントは TypeScript 言語サービスから取得され、デフォルトで表示されます。
数値列挙値を非表示にする
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
値 ノードを展開し、 TypeScript チェックボックスを選択します。 JetBrains Rider はヒントを非表示にし、明示的に初期化された定数の値のみを表示します。 プレビューでは、設定を変更することでコードの見た目にどのような影響があるかを確認できます。
TypeScript の JavaScript ライブラリ
TypeScript で JavaScript ライブラリを操作する場合、それらの 型宣言をインストールする(英語)必要があります。 JetBrains Rider は npm または yarn でインストールすることを通知し、それに応じて package.json ファイルを更新します。
型宣言をインストールする
警告にキャレットを置き、 Alt+Enter を押します。
提案を選択し、 Enter を押します。
TypeScript ネイティブプレビュー (TypeScript-Go)
JetBrains Rider は TypeScript ネイティブプレビュー を利用して、基本的な TypeScript-Go サポートを提供します。
TypeScript-Go サポートを有効にする
typescriptパッケージの代わりに、@typescript/native-previewパッケージを依存関係としてプロジェクトにインストールします。そのためには、 package.json を開き、
typescriptを@typescript/native-previewに置き換えてください。@typescript/native-previewバージョンにマウスオーバーすると、JetBrains Rider は指定されたパッケージがインストールされていないことを通知するポップアップを表示します。 'npm install' の実行 リンクをクリックしてください。
@typescript/native-previewをコンピューターの別の場所にインストールし、プロジェクトで使用する TypeScript パッケージとして指定します。それを行うには:
@typescript/native-previewパッケージをコンピューターにインストールします (たとえば、グローバルにインストールします)。コマンドラインシェルまたは埋め込み型の ターミナル （Alt+F12） で次を入力してください：
npm install --g @typescript/native-preview設定 ダイアログ（Ctrl+Alt+S ）で に移動し、 TypeScript フィールドに
@typescript/native-previewパッケージへのパスを指定します。 標準インストールプロシージャに従った場合、JetBrains Rider の TypeScript ドロップダウンリストに@typescript /native-previewパッケージが表示されます。
TypeScript-Go リポジトリ(英語)をローカルで複製してビルドし、 上記のように設定 | 言語 & フレームワーク | TypeScript ダイアログの TypeScript フィールドに配置します。
コードの整形
JetBrains Rider を使用すると、現在の コードスタイルスキーム に従って TypeScript コードを整形できます。
.editorconfig でフォーマット設定を指定したり、 Prettier を利用したりすることもできます。
デコレーター
デコレーターの場合、再フォーマット時に各デコレーターの直後に改行を入れないよう抑制することが重要となる場合があります。
デコレータを構成する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
折り返しと波括弧 タブで、デコレータの種類に関連するオプションを選択します。
デコレータには次のフォーマットオプションを利用できます：
折り返さない
このオプションを選択すると、装飾文字を使用して行を再フォーマットする際に、折り返しは適用されません。
長い場合は折り返す
このオプションを選択すると、行が右端を超えた場合は折り返されます。
右余白は、 次でハードラップを適用 フィールドがある 設定 | エディター | コードスタイル | JavaScript | 折り返しと波括弧で定義されています。 行が指定された数値を超えると、折り返されます。
長い場合は切り捨てる
このオプションを選択すると、デコレータは右余白を超えた場合、各行に 1 つずつフォーマットされます。
常に折り返す
このオプションを選択すると、すべてのデコレータが各行に 1 つずつフォーマットされます。
構文ハイライト
好みや環境設定、慣習に合わせて TypeScript 対応の構文ハイライトを設定できます。
設定 ダイアログ (Ctrl+Alt+S) で、 に進みます。
カラースキームを選択するか、デフォルトから継承されたハイライト設定を受け入れるか、 カラースキーム：IDE テキストのフォントと色 の説明に従ってカスタマイズします。
コードナビゲーション
さまざまなアクションやポップアップを使い、JetBrains Rider エディターで TypeScript プロジェクトの移動が素早く行えます。
シンボルの宣言に移動
変数、フィールド、メソッド、その他のシンボルからその宣言に移動したり、編集中のコードから移動したりせずに、 ポップアップでシンボル定義を表示できます。
シンボルの宣言に移動するには、シンボルの使用箇所にキャレットを置き、 Ctrl+B を押すか、メインメニューから を選択します。
または、 Ctrl+Click を使用してください。 Ctrl を押しながらシンボルにカーソルを重ねます。 シンボルがハイパーリンクになったら、 Ctrl を押したままクリックしてください。
シンボルの定義をポップアップで表示するには、キャレットを使用位置に置き、 Ctrl+Shift+I を押すか、メインメニューから を選択します。
シンボルの使用箇所に移動
シンボルの使用箇所リストを表示して、移動先を選択できます。
シンボルの使用箇所一覧を取得するには、シンボルの宣言にキャレットを置き、次のいずれかを実行してください：
Ctrl+B を押すか、メインメニューから を選択します。
Ctrl+Alt+F7 を押すか、メインメニューから を選択します。
ポップアップのツールバーアイコンでリストの表示やフィルター設定を行い、インポートステートメント内の不要な使用例などを除外できます。
リストから、移動したいシンボルの使用箇所を選択し、 Enter を押します。
シンボルの型宣言に移動
変数、フィールド、メソッド、その他のシンボルからその型宣言に移動できます。 または、型宣言に移動せずに ポップアップで型定義を開きます。
JetBrains Rider は、オブジェクトの 推論される型も表示します。 推測された型情報は、ツールチップまたはドキュメントポップアップで表示できます。
シンボルからその型の宣言に移動するには、シンボルの使用箇所にキャレットを置き、 Ctrl+Shift+B を押すか、メインメニューから を選択します。
シンボルの型定義をポップアップで表示するには、型定義を表示するシンボルにキャレットを置き、 を選択します。
クラスのインスタンスの場合、定義場所ではなくクラス自体が表示されます。
と の違いに注意してください。 次のコードを含む app.ts ファイルがあるとします。
dog.bark() の dog にキャレットを置くと、 は let dog = new Dog () の変数の宣言に移動し、 はクラス Dog の宣言に移動します。
シンボルの推定型情報を表示する
Ctrl を押したまま、シンボルの上にマウスを置きます。
あるいは、シンボルの上にマウスを置きます。 JetBrains Rider はすぐに ドキュメント ポップアップでその参照を表示します。
上記の ドキュメント検索も参照してください。
サブクラス、スーパークラス、オーバーライド、実装の間を移動する
エディターのガターアイコンを使用するか、適切なショートカットを押すことで、クラスの実装やオーバーライドメソッドをトラックできます。
サブクラスに移動
Ctrl+Alt+B を押すか、ガターで
をクリックし、リストから関連するクラスを選択します。または、メインメニューから またはコンテキストメニューから を選択し、リストから関連するクラスを選択します。
スーパークラスまたはオーバーライドされたメソッドに移動する
キャレットをサブクラスに置き、 Ctrl+U を押します。 JetBrains Rider はスーパークラスの宣言に移動し、その名前の位置にキャレットを置きます。
オーバーライドするメソッドの横にあるガターで「
」をクリックします。 JetBrains Rider はオーバーライドされたメソッドにキャレットがあるスーパークラスへ移動します。または、オーバーライドメソッドにキャレットを置き、 Ctrl+U を押すか、メインメニューから を選択するか、コンテキストメニューから を選択します。
インターフェースまたは実装されたメソッドに移動する
インターフェースの実装にキャレットを置き、 Ctrl+U を押します。
JetBrains Rider は、インターフェースの宣言に移動し、その名前位置にキャレットを置きます。
実装メソッドの横にあるガターで「
」をクリックします。 JetBrains Rider を使用すると、実装されたメソッドのキャレットがある対応するインターフェースに移動します。
または、実装メソッドにキャレットを置き、 Ctrl+U を押すか、メインメニューから またはコンテキストメニューから を選択します。
TypeScript でのリファクタリング
JetBrains Rider は 名前の変更／移動 などの一般的なリファクタリングプロシージャと、 シグネチャーの変更、 パラメーターの導入、 変数の導入 などの TypeScript 固有のリファクタリングプロシージャの両方を提供します。 詳細については、以下を参照してください。
アプリケーションの実行とデバッグ
JetBrains Rider を使うと、Node.js で実行されているクライアントサイド TypeScript コードや TypeScript コードを実行・デバッグできます。 TypeScript の実行とデバッグもご覧ください。