TypeScript
PhpStorm は TypeScript(英語) ソースコードの開発、実行、デバッグをサポートします。PhpStorm は .ts および .tsx ファイルを認識し、ユーザー側で追加の手順を踏むことなく編集するためのコーディング支援を提供します。TypeScript ファイルは 
アイコン。
TypeScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、多数のコードインスペクションとクイックフィックス、および一般的で TypeScript 固有リファクタリングが含まれます。PhpStorm はまた、オンザフライで TypeScript コードを検証し、専用の問題ツールウィンドウでエラーを表示します。
コンパイルエラーは TypeScript ツールウィンドウで報告されます。TypeScript を JavaScript にコンパイルするから詳細を参照してください。
始める前に
設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and 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。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。
プロジェクトのセキュリティ
PhpStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、PhpStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
次のいずれかのオプションを選択します。
セーフモードでプレビュー : この場合、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 ランタイムを指定します。
プロジェクトエイリアスを選択した場合、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 言語サービスからのアノテーションに基づいています。
補完リストには、TypeScript 言語サービスからの提案と PhpStorm によって計算された提案の両方が含まれます。
TypeScript コードは JavaScript にコンパイルされています。
以下のコントロールを使用して、TypeScript 言語サービスの動作を構成します。
プロジェクトエラーの表示 - このチェックボックスはデフォルトでオンになっており、TypeScript 言語サービスはプロジェクト全体のコードをチェックします。検出されたエラーは、問題ツールウィンドウのプロジェクトエラータブに、発生したファイルごとにグループ化されて表示されます。
パフォーマンスの問題を回避するには、プロジェクトエラーの表示チェックボックスをオフにして、TypeScript 言語サービスがファイルを開いたときにのみファイルをチェックするようにします。そうすることで、プロジェクトエラータブには、すでに開いたファイルで検出されたエラーのみが一覧表示されます。
候補の表示 - デフォルトでは、このチェックボックスはオンになっており、PhpStorm は実際のエラーに加えて、TypeScript 言語サービスがコード内で検出した潜在的な問題を表示します。
サービス駆動型エンジンを有効にする - TypeScript コンパイラーのデータに基づいてシンボルの種類を評価するには、このチェックボックスを選択します。
デフォルトでは、チェックボックスはオフになっているため、型評価、解決、コードインスペクション、およびリファクタリングは、PhpStorm 内部 TypeScript エンジンからの型情報に基づいて行われます。
このデフォルトの動作では、PhpStorm 内部の TypeScript エンジンが使用する型評価アルゴリズムが TypeScript コンパイラーのアルゴリズムと異なるため、パフォーマンスの問題や型解決のバグが発生する可能性があります。チェックボックスを選択すると、これらの問題を回避できる場合があります。
オプションフィールドには、tsconfig.json ファイルが見つからない場合に TypeScript 言語サービスに渡すコマンドラインオプションを指定します。使用可能なオプションのリストは TSC 引数(英語)を参照してください。
-wまたは--watch（入力ファイルを見る）オプションは無関係です。
TypeScript 言語サービスを再起動する
状況バーの言語サービスウィジェットをクリックし、次に
をクリックします。
エラーメッセージをローカライズする
設定ダイアログ（Ctrl+Alt+S）で、 に移動します。
TypeScript フィールドに、Bundled とは異なる
typescriptパッケージを指定します。これは、プロジェクトのnode_modulesフォルダーまたは他の場所のtypescriptパッケージである可能性があります。「オプション」フィールドに
--locale <abbreviation of the language to use>と入力します。現在、韓国語 (ko) と日本語 (ja) がサポートされています。
TypeScript コードを編集
PhpStorm は、コンテキスト認識コード補完、シンボルの自動インポート、ドキュメント検索、パラメーターヒント、ナビゲーション、TypeScript 対応の構文ハイライト、lint、リファクタリングなどを含む、TypeScript のスマートコーディング支援を提供します。
自動インポート
PhpStorm は、モジュール、クラス、コンポーネント、エクスポートされたその他の TypeScript シンボルのインポート文を生成できます。既定では、TypeScript シンボルを入力すると、PhpStorm によってインポートステートメントが追加されます。
インポート文を最適化してスタイルを設定する方法については、自動インポートを参照してください。
コードを入力するか、まだインポートされていないシンボルを含むフラグメントを貼り付けると、PhpStorm はこのシンボルのインポートステートメントを生成することもできます。シンボルをインポートするソースが 1 つしかない場合、PhpStorm はインポートステートメントをサイレントに挿入します。それ以外の場合は、自動インポートのツールチップまたは専用インポートのクイックフィックスを使用してください。
コード補完にインポートステートメントを追加する
設定ダイアログ（Ctrl+Alt+S）で、に移動します。自動インポートページが開きます。
TypeScript/JavaScript 領域で、TypeScript のインポートを自動的に追加するおよびコード補完時に実行チェックボックスが選択されていることを確認します。
コードの入力または貼り付け時にインポート文を追加する
設定ダイアログ（Ctrl+Alt+S）で、に移動します。自動インポートページが開きます。
TypeScript/JavaScript 領域で、TypeScript のインポートを自動的に追加するおよび明確なインポートをオンザフライで追加チェックボックスが選択されていることを確認します。
自動インポートのツールチップを使用する
TypeScript シンボルのインポートステートメントが補完または編集時に追加されなかった場合、PhpStorm はシンボルのインポートを提案するポップアップを表示します。提案を受け入れるには、Alt+Enter を押します。
インポート可能なソースが複数ある場合、PhpStorm はそのことを通知します。
この場合、Alt+Enter を押すと、提案のリストが開きます:
自動インポートのツールチップを非表示にするには、設定ダイアログ（Ctrl+Alt+S）を開き、に移動して、自動インポートツールチップを使用チェックボックスをオフにします。
クイックフィックスのインポートを使用する
自動インポートツールチップが表示されない場合は、いつでも Alt+Enter を押して、クイックフィックスを介してインポートステートメントを追加できます。
インポートを生成するには、インポート元を挿入を選択します。
シンボルのインポート元が 1 つだけの場合、PhpStorm はインポートステートメントを生成します。
シンボルのインポート元が複数ある場合は、候補リストから関連するものを選択します。
プロジェクトで 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) で、 に移動し、インポートタブのコントロールを使用します。詳細については、「インポートタブ」を参照してください。
ドキュメントの検索
PhpStorm は、プロジェクトやその依存関係、外部ライブラリで定義されたシンボル、標準の 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 チェックボックスをオフにします。
戻り型のヒント
PhpStorm は、関数呼び出しで関数の戻り値の型を表示し、チェーンを呼び出すことができます。
関数の戻り値のヒントは TypeScript 言語サービスから取得されます。
メソッドチェーンで型ヒントを返すは、メソッド呼び出しが複数行に分かれており、少なくとも 2 つの異なる型を返す場合に表示されます。
メソッドチェーンの戻り値の型のヒントは、内部 PhpStorm エバリュエーターによって提供されます。
関数の戻り値のヒントを構成する
設定ダイアログ（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）で、 に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。
コードナビゲーション
さまざまなアクションとポップアップを使用して、PhpStorm エディターで TypeScript プロジェクトをすばやく移動できます。
シンボルの宣言に移動
変数、フィールド、メソッド、その他のシンボルからその宣言に移動したり、編集中のコードから移動したりせずに、ポップアップでシンボル定義を表示できます。
シンボルの宣言に移動するには、シンボルの使用箇所にキャレットを置き、Ctrl+B を押すか、メインメニューからを選択します。
または、Ctrl+Click を使用します。Ctrl を押したまま、シンボルの上にマウスを置きます。シンボルがハイパーリンクに変わったら、Ctrl を放さずにハイパーリンクをクリックします。
シンボルの定義をポップアップで表示するには、キャレットを使用位置に置き、Ctrl+Shift+I を押すか、メインメニューからを選択します。
シンボルの使用箇所に移動
シンボルの使用箇所のリストを表示して、移動先を選択できます。
シンボルの使用箇所のリストを取得するには、シンボルの宣言にキャレットを置き、次のいずれかを実行します。
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 を押します。
PhpStorm はインターフェースの宣言に移動し、その名前にキャレットを置きます。
実装メソッドの横にあるガターで「
」をクリックします。PhpStorm を使用すると、実装されたメソッドのキャレットを含む対応するインターフェースが表示されます。
または、実装メソッドにキャレットを置き、Ctrl+U を押すか、メインメニューからまたはコンテキストメニューからを選択します。
TypeScript でのリファクタリング
PhpStorm は、名前の変更 / 移動などの一般的なリファクタリング手順と、シグネチャーの変更、パラメーターの導入、変数の導入などの TypeScript 固有のリファクタリング手順の両方を提供します。詳細については、「名前の変更リファクタリング」、「コピーして移動リファクタリング」、「TypeScript のリファクタリング」を参照してください。
アプリケーションの実行とデバッグ
PhpStorm を使用すると、Node.js で実行されているクライアント側の TypeScript コードと TypeScript コードを実行およびデバッグできます。TypeScript の実行とデバッグの詳細を参照してください。
関連ページ：
コード補完
基本コード補完は、可視性スコープ内のクラス、メソッド、キーワードの名前を補完するのに役立ちます。PhpStorm はコンテキストを分析し、現在のキャレット位置から到達可能な選択肢を提案します。候補にはライブテンプレートも含まれます。補完機能は英語以外のキーボードレイアウトでも利用できます。基本補完を呼び出すデフォルトでは、PhpStorm は入力時に自動的にコード補完ポップアップを表示します。あるいは、を押すか、メインメニューからを選択することもできます。2 回目にコード補完を呼び出すと、アク...
コードインスペクション
PhpStorm には、プロジェクト内の異常なコードを検出して修正する一連のコードインスペクションがあります。IDE は、さまざまな問題を見つけてハイライトし、デッドコードを見つけ、考えられるバグやスペルの問題を見つけ、全体的なコード構造を改善することができます。インスペクションは、すべてのプロジェクトファイルまたは特定のスコープでのみ（たとえば、本番コードまたは変更されたファイルでのみ）コードをスキャンできます。すべてのインスペクションには、問題がコードに影響を与える可能性がある程度の重大度レ...
インテンションアクション
エディターで作業すると、PhpStorm がコードを分析し、最適化の方法を探します。インテンションのアクションは、エラーや警告から最適化の提案まで、幅広い状況をカバーします。IDE がコードを改善する方法を見つけるとすぐに、エディター内の現在の行の横に黄色のバルブアイコンが表示されます。このアイコンをクリックすると、現在のコンテキストで利用可能なインテンションアクションが表示されます。感嘆符が付いた赤いバルブは、PhpStorm が問題を検出したことを示し、関連する修正（クイックフィックス）を選...
TypeScript のリファクタリング
リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。移動リファクタリング：PhpStorm を使用すると、ファイルやフォルダーを移動できるだけでなく、TypeScript の最上位シンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュールのクラス、関数、変数に対して機能します。クラス、関数、変数を移動する移動するシンボルを選択します。を押すか、メインメニューまた...
問題ツールウィンドウ
問題ツールウィンドウには、PhpStorm がプロジェクトで検出した問題がいくつかのタブに表示されます。エディター内の対応する行に移動するには、ウィンドウ内の任意の問題を選択してを押すか、ダブルクリックします。ツールウィンドウのタブを切り替えるには、とを押します。複数の問題の説明を一度にコピーするには、ツールウィンドウで選択し、を押します。設計時コードインスペクションが有効になっている場合、このタブには、現在のファイルで見つかったすべてのコードの問題が一覧表示されます。エディターでファイ
TypeScript ツールウィンドウ
TypeScript ツールウィンドウには、TypeScript コードのコンパイルエラーが一覧表示されます。このリストは、コードに加えた変更の影響を受けず、コンパイルを再度呼び出したときにのみ更新されます。PhpStorm は、TypeScript に従って、TypeScript ページで TypeScript 言語サービスがアクティブ化されている場合にのみ、TypeScript ツールウィンドウを表示します。ツールウィンドウは、TypeScript コードを手動でコンパイルした後にのみ表示されます...