WebStorm 2019.3ヘルプ

TypeScript

WebStormはTypeScript(英語)ソースコードの開発、実行、およびデバッグをサポートしています。WebStormは .ts ファイルを認識し、あなたからの追加のステップなしで編集するためのコーディング支援のフルレンジを提供します。TypeScriptファイルは TypeScript file アイコンでマークされています。

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

TypeScriptの検証

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

検出されたすべての構文およびコンパイルエラーは、TypeScriptツールウィンドウエラーおよびコンパイル・エラータブにレポートされます。エラーごとに、WebStormは、発生した行の番号に関する簡単な説明と情報を提供します。

コンソールタブには、ツールウィンドウが開いた後のTypeScript言語サービスのログが表示されます。

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

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワーク | TypeScriptに移動します。TypeScriptページが開きます。

  2. 使用するNode.jsインタープリターを指定してください。これはローカルNode.jsインタープリターまたはWindows Subsystem for LinuxのNode.jsです。

  3. TypeScriptリストから、使用するTypeScriptのバージョンを選択します(WebStormは現在選択されているバージョンを表示します)。

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

    • バンドル:WebStormにバンドルされているtypescriptパッケージを他のパッケージを見つけずに使用するには、このオプションを選択します。

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

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

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

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

構文エラーを監視する

  • TypeScriptツールウィンドウ(表示 | ツール・ウィンドウ | TypeScript)を開き、エラータブに切り替えます。

    タブには、TypeScript言語サービスで検出されたコードの不一致が一覧表示されます。コードを変更すると、リストが動的に更新されます。

    デフォルトでは、リストにはアクティブなエディタータブのファイルからのエラーのみが含まれ、このファイルへのフルパスが上部に表示されます。プロジェクト全体のエラーを表示するには、ツールバーのプロジェクトエラーを表示するトグルボタン Show project errors toggle button を押します。

    エラーメッセージは、それらが検出されたファイルごとにグループ化されています。

    ws_ts_toolwindow_syntax_errors.png

    問題のコードに移動するには、対応するエラーメッセージをダブルクリックするか、それを選択してコンテキストメニューからソースに移動を選択します。

    ws_ts_toolwindow_syntax_errors_jump_to_source.png

コンパイルエラーを監視する

  • TypeScriptツールウィンドウ(表示 | ツール・ウィンドウ | TypeScript)を開き、コンパイル・エラータブに切り替えます。

    Compile all button をクリックし、リストからコンパイルスコープを選択すると、タブが開きます。

    ws_ts_toolwindow_compilation_errors.png

    タブには、選択したスコープで検出されたすべてのコンパイルエラーが一覧表示されます。このリストは、コードに対する変更の影響を受けず、手動でコンパイルを再度呼び出すときにのみ更新されます。

    エラーメッセージは、それらが検出されたファイルごとにグループ化されています。問題のコードに移動するには、対応するエラーメッセージをダブルクリックするか、それを選択してコンテキストメニューからソースに移動を選択します。

    ws_ts_toolwindow_syntax_errors_jump_to_source.png

パラメータヒントの表示

パラメーターのヒントは、コードを読みやすくするためのメソッドや関数のパラメータ名を示します。デフォルトでは、リテラルまたは関数式であるが名前付きオブジェクトではない値に対してのみ、パラメーターヒントが表示されます。

ws_typescript_parameter_hints.png

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

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

  2. リストからパラメーターのヒントを選択し、パラメーターのヒントの表示チェックボックスが選択されていることを確認してから、パラメーターヒントを表示するコンテキストを指定します。

  3. 一部のメソッドおよび関数では、WebStormはどのコンテキストでもパラメーターヒントを表示しません。ブラックリスト...をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。

推定型情報の表示

オブジェクトの推定タイプ(英語)を表示するには、Ctrl を押しながらマウスポインターをその上に移動します。

ws_typescript_inferred_types.png

TypeScriptでJavaScriptライブラリを使用する

TypeScriptでJavaScriptライブラリを使用する場合、それらのタイプ宣言(英語)インストールする(英語)必要があります。WebStormは、npmを介してインストールするように通知し、それに応じて package.json ファイルを更新します。

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

  1. キャレットを警告に合わせて Alt+Enterを押します。

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

    ws_ts_add_types.png

ドキュメントの検索

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

ドキュメントはドキュメントポップアップで表示され、ハイパーリンクを介して関連するシンボルにナビゲートしたり、すでにナビゲートされているページを前後に移動するためのツールバーを提供します。

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

  • Ctrl+Q を押すか、メインメニューから表示 | クイック・ドキュメント・ルックアップを選択します。シンボルの参照はドキュメントポップアップに表示されます。

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

    ws_ts_doc_from_mdn.png

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

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

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

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

コードのリファクタリング

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

TypeScriptでの自動インポート

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

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

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

コード補完でインポート文を追加するには

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

  2. TypeScript / JavaScript領域で、TypeScript のインポートを自動的に追加するコード補完時チェックボックスを選択します。

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

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

  2. TypeScript / JavaScript領域で、TypeScript のインポートを自動的に追加するオンザフライで曖昧でないインポートチェックボックスを選択します。

インポートポップアップの使用

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

ws_import_pop_up.png

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

ws_import_pop_up_multiple_choices.png

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

ws_import_multiple_choices_suggestion_list.png

インポートポップアップを非表示にするには

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

  2. インポート・ポップアップチェックボックスをクリアします。

インポートのクイック修正を使用する

専用のクイックフィックスでいつでもインポートステートメントを追加できます。

Auto import with quick-fix: no choices

インポート・ステートメントを追加するを選択すると、WebStormはインポートを追加します:

Auto import with quick-fix: import statement added

シンボルをインポートするソースが複数ある場合、WebStormは候補リストを表示します:

Auto import with quick-fix, multiple choices: suggestion list

プロジェクトでTypeScript言語サービスが有効になっている場合は、その提案を使用することもできます。

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

シンボルをインポートするソースが複数ある場合、TypeScriptランゲージ・サービスにはいくつかの提案が表示されます。

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

構文強調表示の構成

好みや習慣に応じて、TypeScript対応の構文強調表示を設定できます。

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

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

最終更新日: 2020年1月15日

関連ページ:

TypeScriptツールウィンドウ

TypeScriptに従って、TypeScript言語サービスがTypeScriptページでアクティブになっている場合にのみ、WebStormはこのツールウィンドウを表示します。このツールウィンドウを使用して、TypeScript言語サービスによって検出されたエラーを表示します。エラー:タブには、T...

TypeScript

WindowsとLinux用のmacOS用Node インタープリター:このフィールドには、使用するNode.jsインタープリターを指定します。これは、ローカルNode.jsインタープリターまたはWindows Subsystem for LinuxのNode.jsです。TypeScript:このリス...

Node.js

Node.jsは、ブラウザの外部、たとえばサーバーやコマンドラインでJavaScriptを実行するための軽量なランタイム環境です。WebStormはNode.jsと統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、およびメンテナンスを支援します。アプリケーションのローカ...

コードとパスの自動補完

コード補完はWebStormエディターの重要な機能の1つです。補完候補を表示するために、WebStormはプロジェクトファイルをソースコードで調べ、それらに定義されているクラス、メソッド、関数、および変数を特別な内部インデックスに追加します。JSDocのコメント、TypeScript型定義などからの...

JavaScript ライブラリの構成

WebStormでは、ライブラリとは、WebStormが編集したプロジェクトコードから取得する関数やメソッドに加えて、WebStormの内部知識に関数やメソッドを追加したファイルまたはファイルのセットです。プロジェクトの範囲では、そのライブラリはデフォルトで書き込み禁止になっています。WebStor...

表示方法パラメータ情報

パラメーターのヒントは、メソッドおよび関数の呼び出しのパラメーターの名前を示します。デフォルトでは、パラメーターヒントがエディターの関数呼び出しのパラメーターの隣に表示され、コードが読みやすくなります。エディターでパラメータのヒントをオフにし、ポップアップで表示することができます。最後に、WebSt...