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