WebStorm 2024.2 ヘルプ

TypeScript

WebStorm は TypeScript(英語) ソースコードの開発、実行、デバッグをサポートします。WebStorm は .ts および .tsx ファイルを認識し、ユーザー側で追加の手順を踏むことなく編集するためのコーディング支援を提供します。TypeScript ファイルは TypeScript file アイコン。

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

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

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

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

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

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

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

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

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

    Create a basic TypeScript project
  5. 作成をクリックします。

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

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

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

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

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

  1. ウェルカム画面でリポジトリのクローンをクリックします。

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

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

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

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

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

Untrusted project warning

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

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

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

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

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

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

TypeScript を確認する

WebStorm は、主に TypeScript を JavaScript にコンパイルする TypeScript 言語サービス(英語)のデータに基づいて TypeScript コードを検証します。

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

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

Inspection widget

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

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

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

    View description of an error in the editor

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

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

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

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

    Inspection widget

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

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

    Problems tool window, TypeScript. Project Errors tab shows syntax errors across the project

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

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

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

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

    または、状況バーの言語サービスウィジェットをクリックしてから、Open settings をクリックします。

    TypeScript widget

    TypeScript ページが開きます。

  2. 使用する Node.js インタープリターを指定します。

    プロジェクトエイリアスを選択すると、WebStorm は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、WebStorm はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。

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

    詳細については、「リモート Node.js インタープリターの構成」、「ローカル Node.js インタープリターの構成」、「Windows Subsystem for Linux で Node.js を使用する」を参照してください。

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

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

    • バンドル: このオプションを選択すると、WebStorm に同梱されている typescript パッケージを使用して、別のパッケージを見つけようとしません。

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

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

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

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

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

    • 補完リストには、TypeScript 言語サービスの提案と WebStorm によって計算された提案が含まれています。

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

  5. TypeScript 言語サービスの動作を設定するには、以下のコントロールを使用してください。

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

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

    • 候補の表示 - デフォルトでは、このチェックボックスはオンになっており、WebStorm は実際のエラーに加えて、TypeScript 言語サービスがコード内で検出した潜在的な問題を表示します。

      Show suggestions is enabled
      Show suggestions is disabled
    • サーバーからの型を使用する - TypeScript コンパイラーのデータに基づいてシンボルの種類を評価するには、このチェックボックスを選択します。

      デフォルトでは、チェックボックスはオフになっているため、型評価、解決、コードインスペクション、およびリファクタリングは、WebStorm 内部 TypeScript エンジンからの型情報に基づいて行われます。

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

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

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

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

    TypeScript widget on the Status bar: restart the TypeScript Language service

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

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

  2. TypeScript フィールドに、Bundled とは異なる typescript パッケージを指定します。これは、プロジェクトの node_modules フォルダーまたは他の場所の typescript パッケージである可能性があります。

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

TypeScript コードを編集

WebStorm は、コンテキスト認識コード補完シンボルの自動インポートドキュメント検索パラメーターヒントナビゲーションTypeScript 対応の構文ハイライトおよび lintリファクタリングなどを含む TypeScript のスマートコーディング支援を提供します。

自動インポート

WebStorm は、モジュール、クラス、コンポーネント、エクスポートされたその他の TypeScript シンボルのインポート文を生成できます。既定では、TypeScript シンボルを入力すると、WebStorm によってインポートステートメントが追加されます。

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

コードを入力するか、まだインポートされていないシンボルを含むフラグメントを貼り付けると、WebStorm はこのシンボルのインポートステートメントを生成することもできます。シンボルをインポートするソースが 1 つしかない場合、WebStorm はインポートステートメントをサイレントに挿入します。それ以外の場合は、自動インポートのツールチップまたは専用インポートのクイックフィックスを使用してください。

コード補完にインポートステートメントを追加する

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

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

コードの入力または貼り付け時にインポート文を追加する

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

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

自動インポートのツールチップを使用する

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

    インポート可能なソースが複数ある場合、WebStorm はそのことを通知します。

    Auto import tooltip: multiple choices

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

    Auto import tooltip: multiple choices, suggestion list
  • 自動インポートのツールチップを非表示にするには、設定ダイアログ(Ctrl+Alt+S)を開き、エディター | 一般 | 自動インポートに移動して、自動インポートツールチップを使用チェックボックスをオフにします。

クイックフィックスのインポートを使用する

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

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

    Auto import with quick-fix: no choices

    シンボルのインポート元が 1 つだけの場合、WebStorm はインポートステートメントを生成します。

    Auto import with quick-fix: import statement added
  • シンボルのインポート元が複数ある場合は、候補リストから関連するものを選択します。

    Auto import with quick-fix, multiple choices: suggestion list
  • プロジェクトで TypeScript 言語サービスが有効になっている場合は、その提案を使用することもできます。

    Auto import with suggestion from the TypeScript Language Service: multiple choices

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

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

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

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

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

    Auto

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

    Always with type

    このオプションを使用すると、tsconfig.json「importsNot UsedAsValues」: " エラー "(英語) または「逐語的モジュール構文」: true(英語) フラグに関係なく、WebStorm は type 修飾子を使用しません。

    Never

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

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

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

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

  • 設定ダイアログ (Ctrl+Alt+S) で、エディター | コードスタイル | TypeScript に移動し、インポートタブのコントロールを使用します。詳細については、「インポートタブ」を参照してください。

ドキュメントの検索

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

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

Quick documentation lookup: switch between the popup and the tool window

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

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

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

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

  • ポップアップで the Show Options Menu icon をクリックしてフォントサイズを変更するか、クイックドキュメントツールバーを表示するか、ソースコードに移動します。

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

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

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

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

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

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

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

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

インレイヒントを見る

インレイヒントはエディターに表示され、コードに関する追加情報を提供して、読みやすく移動しやすくします。

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

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

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

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

パラメーターヒント

パラメーターヒントは、メソッドと関数内のパラメーターの名前を表示して、コードを読みやすくします。

ws_typescript_parameter_hints.png

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

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

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

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

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

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

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

戻り型のヒント

WebStorm は、関数呼び出しで関数の戻り値の型を表示し、チェーンを呼び出すことができます。

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

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

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

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

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

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

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

    Return types for chained methods

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

型ヒント

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

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

型ヒントを構成する

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

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

  3. 型アノテーションノードを展開し、型ヒントを表示するコンテキストを指定します。

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

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

数値列挙値

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

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

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

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

TypeScript の JavaScript ライブラリ

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

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

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

    Missing type declaration
  2. 提案を選択し、Enter を押します。

    Add type declarations

構文のハイライト

好みや習慣に応じて、TypeScript 対応の構文ハイライトを設定できます。

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

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

コードナビゲーション

さまざまなアクションとポップアップを使用して、WebStorm エディターで TypeScript プロジェクトをすばやく移動できます。

シンボルの宣言に移動

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

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

    Go to declaration

    または、Ctrl+Click を使用します。Ctrl を押したまま、シンボルの上にマウスを置きます。シンボルがハイパーリンクに変わったら、Ctrl を放さずにハイパーリンクをクリックします。

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

    View the definition of a symbol on a popup

シンボルの使用箇所に移動

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

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

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

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

  2. ポップアップで、ツールバーのアイコンを使用してリストの外観を構成し、インポートステートメントなどでの無関係な使用を除外します。

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

    Go to usages of a symbol

シンボルの型宣言に移動

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

WebStorm は、推測(英語)されたオブジェクトのタイプ(英語)も示します。推測された型情報は、ツールチップまたはドキュメントポップアップで表示できます。

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

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

    Quick type definition

    クラスのインスタンスの場合、これにより、このインスタンスが定義されている場所ではなく、クラス自体が明らかになります。

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

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

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

Go To Declaration and Go To Type Declaration lead to different places

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

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

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

    Inferred type of an object is shown in the documentation popup

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

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

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

サブクラスに移動

  • Ctrl+Alt+B を押すか、ガターで the Overridden method icon をクリックし、リストから関連するクラスを選択します。

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

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

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

  • オーバーライドするメソッドの横にあるガターで「 the Overriding method icon 」をクリックします。WebStorm は、オーバーライドされたメソッドにキャレットがあるスーパークラスに移動します。

    Go to overridden method

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

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

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

    Go to interface from class

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

  • 実装メソッドの横にあるガターで「 the Implementing method icon 」をクリックします。WebStorm を使用すると、実装されたメソッドのキャレットを含む対応するインターフェースが表示されます。

    Go to implemented method

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

TypeScript でのリファクタリング

WebStorm は、名前の変更 / 移動などの一般的なリファクタリング手順と、シグネチャーの変更パラメーターの導入変数の導入などの TypeScript 固有のリファクタリング手順の両方を提供します。詳細については、「TypeScript のリファクタリングおよび JavaScript のリファクタリング」を参照してください。

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

WebStorm を使用すると、Node.js で実行されているクライアント側の TypeScript コードと TypeScript コードを実行およびデバッグできます。TypeScript の実行とデバッグの詳細を参照してください。

関連ページ:

コード補完

コード補完は WebStorm エディターの重要な機能の 1 つです。補完候補を表示するために、WebStorm はプロジェクトファイルをソースコードで調べ、それらに定義されているクラス、メソッド、関数、変数を特別な内部インデックスに追加します。JSDoc のコメント、TypeScript 型定義などからの追加情報も、補完を大幅に改善させることができます。補完はサードパーティのコードのシンボルに対しても機能します。ほとんどの場合、必要なのは、必要なファイルをプロジェクトに追加することだけです。この...

コードインスペクション

WebStorm には、プロジェクト内の異常なコードを検出して修正する一連のコードインスペクションがあります。IDE は、さまざまな問題を見つけてハイライトし、デッドコードを見つけ、考えられるバグやスペルの問題を見つけ、全体的なコード構造を改善することができます。インスペクションは、すべてのプロジェクトファイルまたは特定のスコープでのみ(たとえば、本番コードまたは変更されたファイルでのみ)コードをスキャンできます。すべてのインスペクションには、問題がコードに影響を与える可能性がある程度の重大度レ...

インテンションアクション

エディターで作業するときに、WebStorm はコードを分析し、コードを最適化する方法を検索し、潜在的な問題と実際の問題を検出します。IDE がコードを改善する方法を見つけるとすぐに、エディターの現在の行の横に黄色のバルブアイコンが表示されます。このアイコンをクリックすると、現在のコンテキストで使用可能なインテンションアクションを表示できます。インテンションアクションは、警告から最適化の提案まで、さまざまな状況をカバーします。黄色いバルブのアイコンは、WebStorm が問題を検出したことを示し...

TypeScript のリファクタリング

リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。移動リファクタリング:WebStorm を使用すると、ファイルやフォルダーを移動できるだけでなく、TypeScript の最上位シンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュールのクラス、関数、変数に対して機能します。クラス、関数、変数を移動する移動するシンボルを選択します。を押すか、メインメニューまた...

問題ツールウィンドウ

問題ツールウィンドウには、WebStorm がプロジェクト内で検出した問題がいくつかのタブを使用して表示されます。ウィンドウ内で問題を選択してを押すか、問題をダブルクリックしてエディター内の対応する行に移動します。ツールウィンドウのタブを切り替えるには、とを押します。設計時コードインスペクションが有効になっている場合、この IDE は継続的にコードをチェックし、問題を検索します。このタブには、現在のファイルで見つかったすべてのコードの問題がリストされます。エディターでファイルを切り替えると...

TypeScript ツールウィンドウ

TypeScript ツールウィンドウには、TypeScript コードのコンパイルエラーが一覧表示されます。このリストは、コードに加えた変更の影響を受けず、コンパイルを再度呼び出したときにのみ更新されます。WebStorm は、TypeScript に従って、TypeScript ページで TypeScript 言語サービスがアクティブ化されている場合にのみ TypeScript ツールウィンドウを表示します。ツールウィンドウは、最初に TypeScript コードを手動でコンパイルした後にのみ表示さ...