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