RubyMine 2026.2 Help

TypeScript

RubyMine は .ts と .tsx ファイルを認識し、追加の手順なしで編集時にコーディング支援を提供します。 TypeScript ファイルは、 TypeScript ファイル アイコン。

TypeScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の 補完、 エラーと構文のハイライト 、フォーマット、 多数のコードインスペクションと クイックフィックス 、および 一般的で TypeScript 固有リファクタリングが含まれます。 RubyMine はまた、オンザフライで TypeScript コードの検証を行い、専用の 問題ツールウィンドウにエラーを表示します。

コンパイルエラーは TypeScript ツールウィンドウで報告されます。 TypeScript を JavaScript にコンパイルするから詳細を参照してください。

始める前に

  • 設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and TypeScript と入力します。 プラグインの詳細については、 プラグイン管理を参照してください。

新しいアプリケーションを作成する

RubyMine で基本的な TypeScript プロジェクトを作成できるため、最小限の構成でプロジェクトをセットアップできます。 生成されたプロジェクトには、 package.json 、 tsconfig.json 、 console.log() ウェルカムメッセージを含む index .ts ファイルが含まれます。 さらに、サンプル Web アプリケーションを生成することもできます。

デフォルトで RubyMine は自動的に Git リポジトリを作成し、 生成するソースを Git 管理下に置きます。

  1. ようこそ 画面で 新規プロジェクト をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択します。 新規 プロジェクト ダイアログが開きます。

  2. 左側のペインで、 新規プロジェクト を選択します。

  3. 右側のペインで、 TypeScript を選択し、プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

  4. サンプル Web アプリケーションを生成するには、 オンボーディングのヒントを使用して playground プロジェクトを生成する チェックボックスを選択します。 RubyMine は Vite テンプレートに基づいてプロジェクトを作成し、スムーズなオンボーディングをサポートするヒントを提供します。

  5. 作成 をクリックしてください。

既存の TypeScript アプリケーションから始める

既存の TypeScript アプリケーションの開発を続ける場合は、RubyMine で開いてください。 必要に応じて、 必要な npm の依存関係をダウンロードします。

すでにマシン上にあるアプリケーションソースを開く

  • ようこそ 画面で オープン をクリックするか、メインメニューから ファイル | オープン を選択します。 開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースをチェックアウト

  1. ようこそ 画面で リポジトリのクローン をクリックします。

    あるいは、メインメニューから ファイル | 新規 | バージョン管理からプロジェクト…、 Git | クローン…、 VCS | バージョン管理から取得 を選択します。

    メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。 例えば、 Mercurial または Perforce です。

  2. 表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。 詳細については、 プロジェクトをチェックアウトする(クローン)を参照してください。

プロジェクトのセキュリティ

RubyMine の外部で作成され、インポートされたプロジェクトを開くと、RubyMine はこのプロジェクトの馴染みのないソースコードの処理方法を決定できるダイアログを表示します。

次のいずれかのオプションを選択してください:

  • セーフモードでプレビュー :この場合、RubyMine はプロジェクトをプレビューモードで開きます。 これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。

    RubyMine はエディター領域上部に通知を表示し、 プロジェクトを信頼する… リンクをクリックするといつでもプロジェクトをロードできます。

  • プロジェクトを信頼 :この場合、RubyMine はプロジェクトを開いてロードします。 これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての RubyMine 機能が利用可能になることを意味します。

  • 開かない :この場合、RubyMine はプロジェクトを開きません。

詳細は プロジェクトのセキュリティ をご覧ください。

TypeScript を確認する

RubyMine は主に TypeScript Language Service のデータに基づいて TypeScript コードを検証します。このサービスは TypeScript を JavaScript にコンパイルします。

現在のファイルで検出されたエラーの説明とそれらのクイックフィックスは、エディターおよび 問題ツールウィンドウの ファイル タブから入手できます。

プロジェクト全体のエラーとそのクイックフィックスは、 問題 ツールウィンドウの プロジェクトエラー タブに表示されます。 ツールウィンドウを開くには、エディターの右上隅にある インスペクション ウィジェットをクリックします。

インスペクションウィジェット​

詳細については、 エディターで問題を表示してクイックフィックスを適用および 問題ツールウィンドウを参照してください。

現在のファイルで TypeScript を確認する

  • エディターで、ハイライトされた問題の上にマウスを置きます。 RubyMine は、問題の説明が記載されたツールチップを表示します。

    エディターでエラーの説明を表示する

    提案されたクイックフィックスを適用するか、 その他のアクション… をクリックして、リストから関連するものを選択します。

    エディターでクイックフィックスを適用する
  • または、 問題 ツールウィンドウ Alt+6 の ファイル タブを開くと、問題の説明を表示したり、クイックフィックスを適用したり、エラーが発生したソースコードのフラグメントに移動したり、ツールウィンドウを移動せずに エディタープレビュー ペインでエラーを修正したりできます。 詳細については、 問題ツールウィンドウを参照してください。

プロジェクト全体で TypeScript を確認する

  1. 問題 ツールウィンドウを開くには、エディターの右上隅にある インスペクション​ ウィジェットをクリックします。

    インスペクションウィジェット​

    または、メインメニューから 表示 | ツールウィンドウ | 問題 を選択するか、 Alt+6 を押します。

  2. プロジェクトエラー タブを開くと、プロジェクト全体のエラーが、検出されたファイルごとにグループ化されたエラーメッセージとともに表示されます。

    問題ツールウィンドウ、TypeScript。 プロジェクト全体の構文エラーを Project Errors タブで表示します

    ここでは、問題の説明を表示したり、クイックフィックスを適用したり、エラーが発生したソースコードのフラグメントに移動したり、ツールウィンドウを移動せずに エディタープレビュー ペインでフラグメントを修正したりできます。 問題ツールウィンドウから詳細を参照してください。

TypeScript 言語サービスとの統合を構成する

ほとんどの場合、すべてそのまま動作し、手動設定は必要ありません。 ただし、カスタム typescript パッケージを使用したり、 コマンドラインオプション(英語)を TypeScript 言語サービスに渡したりする場合は、デフォルト設定をカスタマイズできます。

  1. 設定 ダイアログ(Ctrl+Alt+S )で 言語 & フレームワーク | TypeScript に移動します。

    または、 ステータス バーの 言語サービス ウィジェットをクリックしてから、 設定を開く をクリックします。

    TypeScript ウィジェット

    TypeScript ページが開きます。

  2. 使用する Node.js ランタイムを指定します。

    プロジェクト エイリアスを選択すると、RubyMine は ノードランタイム フィールドから JavaScript ランタイム ページのプロジェクトデフォルトインタープリターを自動的に使用します。 ほとんどの場合、RubyMine がプロジェクトのデフォルトランタイムを検出し、自動的にそのフィールドに入力します。

    別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、 閲覧ボタン をクリックして新しいインタープリターを構成することもできます。

  3. TypeScript フィールドで、使用する TypeScript のバージョンを指定します(RubyMine は現在選択されているバージョンを表示します)。

    • デフォルトでは、プロジェクトの node_modules フォルダーにある typescript パッケージが使用されます。

    • バンドル: :このオプションを選択すると、RubyMine にバンドルされている typescript パッケージが使用され、他のものを探しません。

    • 選択: :RubyMine に同梱のものではなくカスタム typescript パッケージを使用する場合は、このオプションを選択します。 開いたダイアログで、関連するパッケージへのパスを選択します。

    • プロジェクトパッケージマネージャーが Yarn 2(英語) の場合、Yarn 2 を介してインストールされた typescript パッケージを使用する必要があります。 この場合、デフォルトで yarn:package.json:typescript が選択されています。

      npm と Yarn のパッケージマネージャーの詳細を参照してください。

  4. TypeScript 言語サービス チェックボックスが選択されていることを確認してください。 結果として:

    • 構文とエラーのハイライトは、TypeScript 言語サービスからのアノテーションに基づいています。

    • 補完リストには、TypeScript 言語サービスからの提案と RubyMine による提案の両方が含まれます。

    • TypeScript コードは JavaScript にコンパイルされます。

  5. 以下のコントロールを使用して、TypeScript 言語サービスの動作を構成します。

    • プロジェクトエラーの表示 - このチェックボックスはデフォルトでオンになっており、TypeScript 言語サービスはプロジェクト全体のコードをチェックします。 検出されたエラーは、発生したファイルごとにグループ化されて プロジェクトエラー タブの ツールウィンドウの「Problems」 に表示されます。

      パフォーマンスの問題を回避するには、 プロジェクトエラーの表示 チェックボックスをオフにして、TypeScript 言語サービスがファイルを開いたときにのみファイルをチェックするようにします。 そうすることで、 プロジェクトエラー タブには、すでに開いたファイルで検出されたエラーのみが一覧表示されます。

    • 候補の表示 - デフォルトでこのチェックボックスは選択されており、RubyMine は実際のエラーに加え、TypeScript 言語サービスが検出した潜在的な問題も表示します。

      提案の表示が有効になっています
      提案の表示は無効です
    • サービス駆動型型エンジンを有効化 - TypeScript コンパイラーのデータに基づいてシンボルの種類を評価するには、このチェックボックスを選択します。

      デフォルトでチェックボックスは外れているため、型評価・解決・コードインスペクション・リファクタリングは RubyMine 内部 TypeScript エンジンの型情報に基づきます。

      このデフォルト動作では、RubyMine の内部 TypeScript エンジンが使用する型評価アルゴリズムが TypeScript コンパイラーのものと異なるため、パフォーマンスの問題や型解決のバグが発生する可能性があります。 チェックボックスをオンにすることで、これらの問題を回避できる場合があります。

  6. オプション フィールドには、 tsconfig.json ファイルが見つからない場合に TypeScript 言語サービスに渡すコマンドラインオプションを指定します。 利用可能なオプションの一覧は TSC 引数 を参照してください。 -w または --watch (入力ファイルを見る )オプションは無関係です。

TypeScript 言語サービスを再起動する

  • ステータス バーの 言語サービス ウィジェットをクリックし、次に the Restart Service icon をクリックします。

    ステータスバーの TypeScript ウィジェット: TypeScript 言語サービスを再起動する

エラーメッセージをローカライズする

Localized error messages
  1. 設定 ダイアログ(Ctrl+Alt+S )で 言語 & フレームワーク | TypeScript に移動します。

  2. TypeScript フィールドに、 バンドル とは異なる typescript パッケージを指定します。 これは、プロジェクトの node_modules フォルダーや他の場所にある typescript パッケージでもかまいません。

  3. オプション フィールドに --locale <abbreviation of the language to use> と入力します。 現在、韓国語 (ko) と日本語 (ja) がサポートされています。

自動インポート

RubyMine は、エクスポートされているモジュール、クラス、コンポーネント、その他のシンボル用のインポートステートメントを生成することができます。 インポートステートメントは、シンボルを入力、貼り付け、完了する際にその場で追加することも、インポートツールチップ、クイックフィックス、またはインテンションアクションを使用して後から追加することもできます。

  1. 設定 ダイアログ(Ctrl+Alt+S )で、 エディター | 一般 | 自動インポート に移動します。 Auto Import ページが開きます。

  2. TypeScript/JavaScript 領域で、 TypeScript のインポートを自動的に追加する および 明確なインポートをオンザフライで追加 チェックボックスが選択されていることを確認します。

Auto import on completion
  1. 設定 ダイアログ(Ctrl+Alt+S )で、 エディター | 一般 | 自動インポート に移動します。 Auto Import ページが開きます。

  2. TypeScript/JavaScript 領域で、 TypeScript のインポートを自動的に追加する および コード補完時に実行 チェックボックスが選択されていることを確認します。

  • TypeScript シンボルのインポートステートメントが補完や編集時に追加されなかった場合、RubyMine がシンボルのインポートを提案するツールチップを表示します。 提案を受け入れるには、 Alt+Enter を押してください

    インポートツールチップ - 単一のインポート元

    インポート可能な元が複数ある場合、RubyMine が通知します:

    自動インポートのツールチップ: 多肢選択

    この場合、 Alt+Enter を押すと、提案のリストが開きます:

    自動インポートのツールチップ: 複数の選択肢、候補リスト
  • 自動インポートのツールチップを非表示にするには、 設定 ダイアログ(Ctrl+Alt+S )を開き、 エディター | 一般 | 自動インポート に移動して、 自動インポートツールチップを使用 チェックボックスをオフにします。

  • 自動インポートツールチップの背景色を変更するには、 Ctrl+Alt+S を押して エディター | カラースキームの切り替え | 一般 | ポップアップおよびヒント | 質問ヒント に移動します。

自動インポートツールチップが表示されない場合は、いつでも Alt+Enter を押して、クイックフィックスを介してインポートステートメントを追加できます。

  • インポートを生成するには、 インポート元を挿入 を選択します。

    クイックフィックスによる自動インポート: 選択肢なし

    インポート元が 1 つしかない場合、RubyMine はそのシンボルのためにインポートステートメントを生成します:

    クイックフィックスによる自動インポート: インポート文が追加されました
  • シンボルのインポート元が複数ある場合は、候補リストから該当するものを選択してください:

    クイックフィックス、複数選択による自動インポート: 候補リスト
  • プロジェクトで TypeScript 言語サービスが有効になっている場合は、その提案も使用できます。

    TypeScript 言語サービスからの提案による自動インポート: 多肢選択

import ステートメントでの type 修飾子の使用を構成する

  1. Ctrl+Alt+S を押して設定を開き、 エディター | コードスタイル | TypeScript を選択します。

  2. インポート タブに切り替え、 インポートで型修飾子を使用する フィールドで、タイプのインポートステートメントでの type 修飾子の使用を構成します。 この設定はタイプにのみ適用され、どのオプションを選択しても、タイプ以外には type 修飾子は挿入されないことに注意してください。

    このオプションを使用すると、 tsconfig.json で 「importsNot UsedAsValues」: " エラー "(英語) または 「逐語的モジュール構文」: true(英語) が指定されている場合に type 修飾子が追加されます。

    それ以外の場合、優先されるインポートタイプがない場合、 type 修飾子は挿入されません。

    Auto

    このオプションを使用すると、 tsconfig .json で 「importsNot UsedAsValues」: " エラー "(英語) または 「逐語的モジュール構文」: true(英語) が指定されているかどうかに関係なく、常に type 修飾子が挿入されます。

    常に type を付与

    このオプションを使用すると、RubyMine は tsconfig.json の "importsNotUsedAsValues": "error" または "verbatimModuleSyntax": true フラグに関係なく、 type 修飾子を使用しません:

    なし

type 修飾子を含む import ステートメントがすでに存在する場合、この修飾子は、選択したオプションや tsconfig.json の設定に関係なく、型をさらにインポートするために常に使用されます。

定数については、 type 修飾子の代わりに {<constant name>} 指定子が使用されます。 TypeScript 4.5 以降で Auto または 常 が選択されている場合、以前のすべての修飾子は {type} 指定子に変換されます。 それ以外の場合は、既存のすべての指定子は変更されません。

TypeScript オフィシャル Web サイト(英語)の詳細を参照してください。

インポートステートメントの外観を構成する

  • 設定 ダイアログ(Ctrl+Alt+S )で、 エディター | コードスタイル | TypeScript に移動し、 インポート タブのコントロールを使用します。

ドキュメントの検索

RubyMine は、プロジェクトや依存関係、外部ライブラリ、標準の JavaScript API で定義されているシンボルの参照取得が TypeScript を通して可能です。

デフォルトでは、ドキュメントは ドキュメント ポップアップに表示されますが、いつでも ドキュメントツールウィンドウで開くことも、デフォルトで ドキュメントツールウィンドウ に表示されるように設定することもできます。

クイックドキュメントを見る

  • エディターで必要なシンボルの上にマウスを置きます。

    あるいは、シンボルにキャレットを置き、 Ctrl+Q を押すか、メインメニューから 表示 | クイックドキュメント を選択します。

  • デフォルトで ドキュメント ツールウィンドウでクイックドキュメントを開くには、ポップアップまたはツールウィンドウのツールバーで オプションアイコン をクリックし、 ドキュメントのポップアップを前に表示 オプションをオフにします。

  • ポップアップで 「オプションメニューを表示」アイコン をクリックしてフォントサイズを変更したり、クイックドキュメントツールバーを表示したり、ソースコードに移動したりできます。

    詳細は、 ポップアップのクイックドキュメントを参照してください。

ツールウィンドウで特定コード要素のドキュメントを開き、 ツールウィンドウにドキュメントを保持するに従って、ファイル内の他要素のドキュメントも表示し続けることができます。

ツールウィンドウでは、コードドキュメントが固定されていないタブ(アスタリスクシンボル(* )でマークされたタブ)に表示されます。 このドキュメントを表示するには、シンボルにカーソルを合わせるか、キャレットを配置します。 詳細については、「クイックドキュメントツールウィンドウ: モード 」を参照してください。

キャレットのシンボルの MDN ドキュメントを表示する

TypeScript で利用可能な標準 JavaScript メソッドの場合、RubyMine は対応する MDN 記事へのリンクも表示します。

クイックドキュメントルックアップ: MDN
  1. ドキュメント ウィンドウ Ctrl+Q で、MDN リンクをクリックします。

  2. または、 Shift+F1 を押すか、メインメニューから 表示|外部ドキュメント を選択します。

RubyMine は、 デフォルトの RubyMine ブラウザーで MDN 記事を開きます。

インレイヒントを見る

インレイヒントはエディターに表示され、コードの可読性やナビゲーションのしやすさのために追加情報を提供します。

インレイヒントは、 .ts および .tsx ファイルで使用できます。

  • TypeScript 言語サービスが有効になっていて、TypeScript バージョンが 4.4 以上の場合、インレイヒントは TypeScript 言語サービスから取得されます。

  • 以前の TypeScript バージョンや TypeScript 言語サービスが無効な場合、インレイヒントは内部 RubyMine 評価器から取得されます。

常にファイル全体を分析する多くのインスペクションやハイライトとは異なり、ヒントは現在表示されている領域のみ取得され、スクロール時に更新されます。 この動作は、より高いパフォーマンスを目的としています。

パラメーターヒント

パラメーターヒントは、コードを読みやすくするためのメソッドや関数のパラメーター名を示します。

ws_typescript_parameter_hints.png

TypeScript バージョン 5.2 以降では、パラメーターヒントはホバーするとリンクに変わります。 Ctrl を押した状態でこのようなリンクをクリックすると、メソッド定義が表示されます。

パラメーターのヒントを設定する

  1. 設定 ダイアログ(Ctrl+Alt+S )を開き、 エディター | インレイヒント に進みます。

  2. パラメーター命名語句名 の TypeScript を展開します。

  3. 対応するチェックボックスを選択して、パラメーターヒントの表示対象コンテキストを指定します。

    プレビューには、設定変更がコードの見た目にどのように影響するかが表示されます。

  4. 任意のコンテキストで任意の値型のパラメーターヒントを非表示にするには、 パラメーター命名語句名 の TypeScript チェックボックスをオフにします。

戻り型のヒント

RubyMine は、関数呼び出しや呼び出しチェーン内で関数の戻り値の型を表示できます。

  • 関数の戻り値のヒントは TypeScript 言語サービスから取得されます。

  • メソッドチェーンで型ヒントを返すは、メソッド呼び出しが複数行に分かれており、少なくとも 2 つの異なる型を返す場合に表示されます。

    メソッドチェーン内の戻り値の型ヒントは、内部 RubyMine 評価器によって提供されます。

関数の戻り値のヒントを構成する

  1. 設定 ダイアログ(Ctrl+Alt+S )を開き、 エディター | インレイヒント に進みます。

  2. タイプ で TypeScript ノードを展開し、 関数の戻り値の型 チェックボックスをオンにします。

  3. メソッドチェーンで戻り値の型のヒントを表示するには、 メソッドチェーン ノードを展開し、 TypeScript チェックボックスを選択します。

プレビューには、設定変更がコードの見た目にどのように影響するかが表示されます。

型ヒント

型ヒントは、変数、フィールド、パラメーターの型を示します。 変数とフィールドの型は、その定義の横に表示されます。 パラメーターの型ヒントは関数呼び出しに表示されます。 型ヒントは JSDoc コメント やコードの静的解析に基づいて推論されます。

TypeScript バージョン 5.3 以降では、マウスをホバーするとタイプヒントがリンクに変わります。 Ctrl を押しながらこのようなリンクをクリックすると、型定義が表示されます。

型ヒントを構成する

  1. 設定 ダイアログ(Ctrl+Alt+S )を開き、 エディター | インレイヒント に進みます。

  2. タイプ | TypeScript を展開します。

  3. 型ヒントを表示するコンテキストを指定してください。

    プレビューには、設定変更がコードの見た目にどのように影響するかが表示されます。

  4. 任意のコンテキストで任意の値の型のパラメーターの型と戻り値の型のヒントを非表示にするには、 タイプ の TypeScript チェックボックスをオフにします。

数値列挙型値

RubyMine は、コードを読みやすくするために 数値列挙型のヒントを表示します。 これらのヒントは TypeScript 言語サービスから取得され、デフォルトで表示されます。

数値列挙値を非表示にする

  1. 設定 ダイアログ(Ctrl+Alt+S )を開き、 エディター | インレイヒント に進みます。

  2. 値 ノードを展開し、 TypeScript チェックボックスを選択します。 RubyMine はヒントを非表示にし、明示的に初期化された定数の値のみを表示します。 プレビューには、設定変更がコードの見た目にどのように影響するかが表示されます。

TypeScript の JavaScript ライブラリ

TypeScript で JavaScript ライブラリを操作する場合、それらの 型宣言をインストールする(英語)必要があります。 RubyMine は、 npm または yarn でのインストールを通知し、必要に応じて package.json ファイルを更新します。

型宣言をインストールする

  1. 警告にキャレットを置き、 Alt+Enter を押します。

    型宣言がありません
  2. 提案を選択し、 Enter を押します。

    型宣言を追加する

TypeScript ネイティブプレビュー (TypeScript-Go)

RubyMine は、 TypeScript ネイティブプレビュー を利用して基本的な TypeScript-Go サポートを提供します。

TypeScript-Go サポートを有効にする

  • typescript パッケージの代わりに、 @typescript/native-preview パッケージを依存関係としてプロジェクトにインストールします。

    そのためには、 package.json を開き、 typescript を @typescript/native-preview に置き換えてください。 @typescript/native-preview バージョンにマウスオーバーすると、RubyMine は指定されたパッケージが未インストールであることを知らせるポップアップを表示します。 'npm install' の実行 リンクをクリックしてください。

    typescript の代わりに @typescript/native-preview をインストールする
  • @typescript/native-preview をコンピューターの別の場所にインストールし、プロジェクトで使用する TypeScript パッケージとして指定します。

    それを行うには:

    1. @typescript/native-preview パッケージをコンピューターにインストールします (たとえば、グローバルにインストールします)。

      コマンドライン シェルまたは組み込みの ターミナル (Alt+F12) で、次を入力してください:

      npm install --g @typescript/native-preview

    2. 設定 ダイアログ(Ctrl+Alt+S )で 言語 & フレームワーク | TypeScript に移動し、 TypeScript フィールドに @typescript/native-preview パッケージへのパスを指定します。 標準インストール手順に従った場合、RubyMine の TypeScript ドロップダウンリストに @typescript /native-preview パッケージが表示されます。

    設定でグローバルにインストールされた @typescript/native-preview パッケージを有効にするダイアログ
  • TypeScript-Go リポジトリ(英語)をローカルで複製してビルドし、 上記のように設定 | 言語 & フレームワーク | TypeScript ダイアログの TypeScript フィールドに配置します。

コードの整形

RubyMine は、現在の コードスタイルスキームに従って TypeScript コードを整形できます。

.editorconfig でフォーマット設定を指定したり、 Prettier. を利用することもできます

デコレーター

デコレータについては、再フォーマット時にそれぞれのデコレータ直後への改行挿入を抑制することが重要な場合があります。

デコレータを構成する

  1. 設定 ダイアログ(Ctrl+Alt+S )を開き、 エディター | コードスタイル | TypeScript に進みます。

  2. 折り返しと波括弧 タブで、デコレータの種類に関連するオプションを選択します。

    デコレータのラッピングを構成する

デコレータには次のフォーマットオプションがあります:

折り返さない

このオプションを選択すると、装飾文字を使用して行を再フォーマットする際に、折り返しは適用されません。

長い場合は折り返す

このオプション選択時、右余白を超えた行は折り返されます。

右余白は 次でハードラップ フィールドで、 設定 | エディター | コードスタイル | JavaScript | 折り返しと波括弧に定義されています。 行が指定された数値を超えると、折り返されます。

長い場合は切り捨てる

このオプションを選択すると、デコレータが右余白を超えた場合、各行に 1 つずつフォーマットされます。

常に折り返す

このオプションを選択すると、すべてのデコレータが各行に 1 つずつフォーマットされます。

構文ハイライト

環境設定や習慣に合わせて TypeScript 対応の構文ハイライトを設定できます。

  1. 設定 ダイアログ(Ctrl+Alt+S )で エディター | カラースキームの切り替え | TypeScript に移動します。

  2. カラースキームを選択し、デフォルトから継承されたハイライト設定を受け入れるか、 色とフォント の説明に従ってカスタマイズできます。

コードナビゲーション

さまざまなアクションやポップアップを使って RubyMine エディターで TypeScript プロジェクトをすばやくナビゲートできます。

シンボルの宣言に移動

変数、フィールド、メソッド、その他のシンボルからその宣言に移動したり、編集中のコードから移動したりせずに、 ポップアップでシンボル定義を表示できます。

  • シンボルの宣言に移動するには、シンボルの使用箇所にキャレットを置き、 Ctrl+B を押すか、メインメニューから 移動 | 宣言または使用箇所 を選択します。

    宣言に移動

    または Ctrl+Click を利用します: Ctrl を押しながらシンボルの上にマウスカーソルを合わせます。 シンボルがハイパーリンクに変わったら、 Ctrl を離さずにクリックしてください。

    Go to Declaration with Ctrl+click
  • シンボルの定義をポップアップで表示するには、キャレットを使用位置に置き、 Ctrl+Shift+I を押すか、メインメニューから 表示 | クイック定義 を選択します。

    ポップアップでシンボルの定義を表示する

Go to usages of a symbol

シンボルの使用箇所一覧を表示し、移動先を選択できます。

  1. シンボルの使用箇所一覧を取得するには、シンボルの宣言位置にキャレットを置いて次のいずれかを実行します:

    • Ctrl+B を押すか、メインメニューから 移動 | 宣言または使用箇所 を選択します。

    • Ctrl+Alt+F7 を押すか、メインメニューから 編集 | 使用箇所の検索 | 使用箇所を表示 を選択します。

  2. ポップアップでツールバーのアイコンを使ってリストの外観を設定し、インポートステートメント内などの無関係な使用をフィルターで除外できます。

    Configure the Go To Usages list
  3. リストから、移動したいシンボルの使用箇所を選択し、 Enter を押します。

    Go to usages of a symbol

シンボルの型宣言に移動

変数、フィールド、メソッド、その他のシンボルからその型宣言に移動できます。 または、型宣言に移動せずに ポップアップで型定義を開きます。

RubyMine はオブジェクトの 推論される型 も表示します。 推測された型情報は、ツールチップまたはドキュメントポップアップで表示できます。

  • シンボルからその型の宣言に移動するには、シンボルの使用箇所にキャレットを置き、 Ctrl+Shift+B を押すか、メインメニューから 移動 | 型宣言 を選択します。

    Go to type declaration
  • シンボルの型定義をポップアップで表示するには、型定義を表示するシンボルにキャレットを置き、 表示 | クイック型定義 を選択します。

    クイック型定義

    クラスのインスタンスの場合、これにより定義場所ではなくクラス自体が判明します。

Go 宣言に移動 と Go 型宣言に移動 の違いに注意してください。 次のコードを含む app.ts ファイルがあるとします。

import {Dog} from "./dog"; let dog = new Dog(); dog.bark();

dog.bark() の dog にキャレットを置くと、 Go 宣言に移動 は let dog = new Dog () の変数の宣言に移動し、 Go 型宣言に移動 はクラス Dog の宣言に移動します。

シンボルの推定型情報を表示する

  • Ctrl を押したまま、シンボルの上にマウスを置きます。

    Inferred type of a symbol is shown in a tooltip
  • あるいは、シンボルの上にマウスを置きます。 RubyMine はその参照を ドキュメント ポップアップで即表示します。

    Inferred type of an object is shown in the documentation popup

    上記の ドキュメント検索から詳細を参照してください。

サブクラス、スーパークラス、オーバーライド、実装の間を移動する

エディターのガターアイコンを利用するか、各種ショートカットを押すことで、クラスの実装およびオーバーライドメソッドを追跡できます。

サブクラスに移動

  • Ctrl+Alt+B を押すか、ガターで オーバーライドされたメソッドのアイコン をクリックし、リストから関連するクラスを選択します。

  • または、メインメニューから 移動 | 実装(s) またはコンテキストメニューから Go 移動 | 実装(s) を選択し、リストから関連するクラスを選択します。

スーパークラスまたはオーバーライドされたメソッドに移動する

  • キャレットをサブクラスに置き、 Ctrl+U を押します。 RubyMine はスーパークラスの宣言箇所に移動し、その名前にキャレットを置きます。

  • オーバーライドするメソッドの横にあるガターで「オーバーライドするメソッドのアイコン 」をクリックします。 RubyMine はオーバーライドされたメソッドにキャレットがあるスーパークラスへ移動します。

    または、オーバーライドメソッドにキャレットを置き、 Ctrl+U を押すか、メインメニューから 移動 | スーパーメソッド を選択するか、コンテキストメニューから Go 移動 | スーパーメソッド を選択します。

インターフェースまたは実装されたメソッドに移動する

  • インターフェースの実装にキャレットを置き、 Ctrl+U を押します。

    Go to interface from class

    RubyMine はインターフェースの宣言箇所に移動し、その名前にキャレットを置きます。

  • 実装メソッドの横にあるガターで「実装しているメソッドのアイコン 」をクリックします。 RubyMine は実装されたメソッドにキャレットが設定された対応インターフェースに移動します。

    Go to implemented method

    または、実装メソッドにキャレットを置き、 Ctrl+U を押すか、メインメニューから 移動 | スーパーメソッド またはコンテキストメニューから Go 移動 | スーパーメソッド を選択します。

TypeScript でのリファクタリング

RubyMine では、 名前の変更/移動といった一般的なリファクタリングプロシージャおよび、 シグネチャーの変更、 パラメーター導入、 変数導入などの TypeScript 固有のリファクタリングプロシージャの両方を利用できます。 詳細は 名前の変更リファクタリング および 移動およびコピーリファクタリング を参照してください。

アプリケーションの実行とデバッグ

RubyMine では、クライアントサイド TypeScript コードや Node.js 上の TypeScript コードを実行・デバッグできます。 TypeScript の実行とデバッグの詳細を参照してください。

2026 年 7 月 14 日