WebStorm 2019.2ヘルプ

TypeScript

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

TypeScript対応のコーディング支援には、キーワード、ラベル、変数、パラメータ、関数、エラーと構文の強調表示、書式設定、多数のコードインスペクションとクイックフィックス、および共通およびTypeScript固有のリファクタリングが含まれます。WebStormはTypeScriptをJavaScriptで検証してコンパイルします。

TypeScriptの検証とJavaScriptへのコンパイル

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)で、エディター | 一般 | 外観に移動します。外観ページが開きます。

  2. パラメータ名のヒントを表示するチェックボックスの横にある構成をクリックします(チェックボックスはデフォルトで選択されています)。

  3. 表示されたパラメーター名ヒントの構成ダイアログで、オプション領域の引数の名前をすべて表示するチェックボックスを選択します。

推定された型情報の表示

オブジェクトの推定タイプ(英語)を表示するには、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. 配色を選択するか、デフォルトから継承された強調表示設定を受け入れるか、または色とフォントの設定の説明に従ってカスタマイズします。

最終更新日: 2019年9月12日

関連事項

リファレンス:

言語およびフレームワーク固有のガイドライン

関連ページ:

TypeScriptツールウィンドウ

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

TypeScript

WindowsとLinux用のmacOS用デフォルトでは、TypeScript 言語サービスチェックボックスが選択されています。Node インタープリター:このフィールドには、使用するNode.jsインタープリターを指定します。これは、ローカルNode.jsインタープリターまたはWindows Su...

Node.js

Node.jsはサーバーサイドでJavaScriptを実行するための軽量のランタイム環境です。WebStormはNode.jsと統合して、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、および保守を支援します。アプリケーションのローカルランタイムとして、またはnpmパッケージ...

コードとパスの自動補完

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

JavaScript ライブラリーを設定する

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

外観

WindowsとLinux用のmacOS用このページを使用して、エディターの外観をカスタマイズします。キャレットの点滅間隔 (ミリ秒)指定した期間(ミリ秒単位)でキャレットを点滅させるには、このチェックボックスを選択します。ブロック・キャレットを使用するこのチェックボックスをオンにすると、ブロックキ...