CLion 2026.2 Help

TypeScript

CLion は .ts .tsx ファイルを認識し、追加の手順なしでこれらを編集するためのコーディング支援を提供します。 TypeScript ファイルは、 TypeScript ファイル アイコン。

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

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

始める前に

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

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

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

デフォルトでは、CLion は自動的に Git リポジトリを作成し、 生成されたソースを Git の制御下に置きます

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

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

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

  4. 作成 をクリックします。

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

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

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

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

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

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

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

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

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

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

CLion の外部で作成され、そこにインポートされたプロジェクトを開くと、CLion は、未知のソースコードを含むこのプロジェクトの処理方法を選択できるダイアログを表示します。

次のいずれかのオプションを選択します:

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

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

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

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

詳細については、 プロジェクトのセキュリティ を参照してください。

TypeScript を確認する

CLion は主に TypeScript 言語サービスのデータをもとに TypeScript を JavaScript にコンパイルし、TypeScript コードを検証します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    TypeScript ウィジェット

    TypeScript ページが開きます。

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

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

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

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

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

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

    • 選択: このオプションを選択すると、CLion にバンドルされているものではなく、カスタム typescript パッケージを使用できます。 開いたダイアログで、関連するパッケージへのパスを選択します。

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

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

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

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

    • 補完リストには TypeScript 言語サービスからの提案と CLion で計算された提案の両方が含まれます。

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

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

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

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

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

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

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

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

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

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

  • ステータス バーの 言語サービス ウィジェットをクリックし、次に サービスの再起動アイコン をクリックします。

    ステータスバーの 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) がサポートされています。

自動インポート

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

インポートステートメントの最適化やスタイル設定方法については、 自動インポート を参照してください。

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

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

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

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

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

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

    インポート元が複数存在する場合、CLion はその旨を通知します:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    自動

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

    常に型付き

    このオプションを使用すると、 tsconfig.json "importsNotUsedAsValues": "error""verbatimModuleSyntax": true フラグに関わらず、CLion は type 修飾子を一切使用しません:

    しない

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

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

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

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

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

ドキュメントの検索

CLion では、TypeScript がすべて実装しているため、プロジェクトや依存関係、外部ライブラリ、標準 JavaScript API のシンボルの参照を取得できます。

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

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

  • エディター内で必要なシンボルの上にカーソルを合わせます。

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

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

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

    詳細については クイックドキュメント を参照してください。

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

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

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

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

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

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

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

インレイヒントを見る

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

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

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

  • TypeScript の旧バージョンまたは TypeScript 言語サービスが無効な場合、インレイヒントは内部 CLion エバリュエーターから取得されます。

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

パラメーターヒント

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

ws_typescript_parameter_hints.png

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

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

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

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

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

    プレビューには設定を変更した際にコードの見た目がどう変わるか表示されます。

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

戻り型のヒント

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

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

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

    メソッドチェーンの戻り値の型ヒントは、内部 CLion エバリュエーターによって提供されます。

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

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

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

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

プレビューには設定を変更した際にコードの見た目がどう変わるか表示されます。

型ヒント

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

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

型ヒントを構成する

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

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

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

    プレビューには設定を変更した際にコードの見た目がどう変わるか表示されます。

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

数値列挙型値

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

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

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

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

TypeScript の JavaScript ライブラリ

TypeScript で JavaScript ライブラリを操作する場合、それらの 型宣言をインストールする(英語)必要があります。 CLion は npm または yarn でのインストールを促し、 パッケージ.json​​ ファイルも更新します。

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

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

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

    型宣言を追加する

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

CLion は TypeScript ネイティブプレビューを使って TypeScript-Go の基本サポートを提供します。

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

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

    そのためには、 パッケージ.json​​ を開き、 typescript@typescript/native-preview に置き換えてください。 @typescript/native-preview バージョンにカーソルを合わせると、CLion は指定パッケージ未インストールの通知ポップアップを表示します。 '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 パッケージへのパスを指定します。 標準インストールプロシージャに従った場合、CLion の TypeScript ドロップダウンリストに @typescript /native-preview パッケージが表示されます。

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

コードの整形

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

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

デコレーター

デコレーターの場合、再フォーマット時に各デコレーターの後で自動改行を抑制することが重要な場合があります。

デコレータを構成する

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

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

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

デコレータに対しては、次のフォーマットオプションが利用できます:

折り返さない

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

長い場合は折り返す

このオプションを選択すると、行が右余白を超えた場合に折り返されます。

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

長い場合は切り捨てる

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

常に折り返す

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

構文ハイライト

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

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

  2. カラースキームを選択し、デフォルトから継承されたハイライト設定を受け入れるか、 色とフォント に記載されている手順に従ってカスタマイズしてください。

コードナビゲーション

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

シンボルの宣言に移動

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

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

    Go to declaration

    あるいは、 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

シンボルの型宣言に移動

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

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

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

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

    クイック型定義

    クラスインスタンスの場合は、そのインスタンスの定義ではなくクラス自体が表示されます。

Go To DeclarationGo To Type Declaration の違いに注意してください。 次のコードを含む app.ts ファイルがあるとします。

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

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

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

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

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

    Inferred type of an object is shown in the documentation popup

    上記の ドキュメント参照を参照してください。

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

エディターのガターアイコンか適切なショートカットで、クラス実装やオーバーライドメソッドをトラックできます。

サブクラスに移動

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

  • または、メインメニューから ナビゲート | 実装 またはコンテキストメニューから Go To | 実装 を選択し、リストから関連するクラスを選択します。

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

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

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

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

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

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

    Go to interface from class

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

  • 実装メソッドの横にあるガターで「実装されたメソッドアイコン 」をクリックします。 CLion で実装メソッドのキャレットつきで該当インターフェースに移動します。

    Go to implemented method

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

2026 年 7 月 15 日