IntelliJ IDEA 2020.2 ヘルプ

TypeScript

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

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

始める前に

  • 設定 / 環境設定 | プラグインページで JavaScript と TypeScript バンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

TypeScript を確認する

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

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

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

ほとんどの場合、すべてがそのまま機能します。ただし、カスタム typescript パッケージを使用する場合、または一部のコマンドラインオプション(英語)を TypeScript 言語サービスに渡す場合は、以下の TypeScript 言語サービスとの統合を構成するで説明するようにデフォルト設定をカスタマイズできます。

構文エラーを監視する

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

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

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

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

    TypeScript tool window, Errors tabs shows syntax errors

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

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

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

    TypeScript ツールウィンドウを開いた直後は、コンパイルエラータブが表示されていません。このタブは、Compile all buttonをクリックしてコンパイルスコープを選択したときに、最初の手動コンパイル後にのみ表示されます。

    TypeScript: monitor compilation errors

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TypeScript コードを編集

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

自動インポート

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

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

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

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

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

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

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

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

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

インポートポップアップを使用する

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

  • 提案を受け入れるには、Alt+Enter を押します。

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

    ws_import_pop_up_multiple_choices.png

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

    ws_import_multiple_choices_suggestion_list.png
  • インポートポップアップを非表示にするには、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | 一般 | 自動インポートに移動して、インポートポップアップチェックボックスをオフにします。

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

インポートポップアップが表示されない場合は、専用のクイックフィックスを使用してインポートステートメントをいつでも追加できます。

  • インポートを生成するには、インポートステートメントを追加するを選択します。

    Auto import with quick-fix: no choices

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

    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: no choices

    シンボルのインポート元が複数ある場合は、TypeScript 言語サービスが表示するリストから関連するものを選択します。

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

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

  • 設定 / 環境設定ダイアログ Ctrl+Alt+Sエディター | コードスタイル | TypeScript に移動し、インポートタブのコントロールを使用します。

ドキュメントの検索

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

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

シンボルのドキュメントを見る

  • 記号にキャレットを置き、Ctrl+Q を押すか、メインメニューから表示 | クイックドキュメントルックアップを選択します。

  • シンボルの上にマウスポインタを置くと、IntelliJ IDEA はすぐにその参照をドキュメントポップアップに表示します。

    この動作をオフにするか、ポップアップを速くまたは遅く表示するように構成できます。以下のドキュメントポップアップの動作の構成を参照してください。

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

ws_ts_doc_from_mdn.png

ドキュメントポップアップの動作を構成する

  • ドキュメントの表示を自動的にオフにするには、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | コード編集に移動して、マウス移動でクイックドキュメントを表示するチェックボックスをオフにします。

  • ドキュメントポップアップを速くまたは遅く表示するには、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | 一般 | コード補完に移動してから、ドキュメントのポップアップを表示するチェックボックスを選択して遅延時間を指定します。

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

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

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

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

パラメーターのヒント

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

ws_typescript_parameter_hints.png

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

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

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

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

TypeScript の JavaScript ライブラリ

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

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

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

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

    ws_ts_add_types.png

構文の強調表示

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

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

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

コードナビゲーション

さまざまなアクションとポップアップを使用して、IntelliJ IDEA エディターで 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. リストから、ジャンプするシンボルの使用箇所を選択します。

    Go to usages of a symbol

シンボルの型宣言に移動

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

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

型宣言にジャンプ

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

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

    Quick type definition

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

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

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

    Inferred type of a symbol is shown in a tooltip
  • または、マウスポインターを記号の上に移動します。IntelliJ IDEA は、その参照をドキュメントポップアップにすぐに表示します。

    Inferred type of an object is shown in the documentation popup

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

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

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

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

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

サブクラスにジャンプ

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

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

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

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

  • オーバーライドするメソッドの横のガターでthe Overriding method iconをクリックします。IntelliJ IDEA は、オーバーライドされたメソッドにカーソルを置いて、スーパークラスに移動します。

    Go to overridden method

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

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

  • キャレットをインターフェースの実装に配置し、Ctrl+U を押して、移動するインターフェースを選択します。

    Go to interface from class

    IntelliJ IDEA を使用すると、インターフェースの宣言に移動し、カーソルをその名前に置きます。

  • 実装方法の横のガターでthe Implementing method iconをクリックします。IntelliJ IDEA は、実装されたメソッドにカーソルがある対応するインターフェースに移動します。

    Go to implemented method

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

TypeScript でのリファクタリング

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

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

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

最終更新日 :

関連ページ:

コード補完

このセクションでは、コーディングプロセスのスピードアップを可能にするコンテキスト対応コード補完のさまざまなテクニックについて説明します。基本補完 :基本コード補完は、可視性スコープ内のクラス、メソッド、フィールド、およびキーワードの名前を完成させるのに役立ちます。コード補完を呼び出すと、Intell...

コードインスペクション

IntelliJ IDEA には、コンパイル前にプロジェクト内の異常コードを検出して修正する一連のコードインスペクションがあります。IDE はさまざまな問題を見つけて強調表示し、デッドコードを見つけ、可能性のあるバグを見つけ、スペルの問題、コード構造全体を改善することができます。インスペクションは、...

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

エディターで作業するときに、IntelliJ IDEA はコードを分析し、コードを最適化する方法を検索し、潜在的な問題と実際の問題を検出します。IDE がコードを変更する方法を見つけるとすぐに、エディターの現在の行の横に黄色い電球アイコンが表示されます。このアイコンをクリックすると、このコード単位で...

TypeScript のリファクタリング

リファクタリングは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングはコードを堅牢にし、dryを維持しやすくします。移動リファクタリング:IntelliJ IDEAを使用すると、ファイルやフォルダーを移動できるだけでなく、TypeScriptの最上位シンボル...

プラグインを管理する

プラグインは IntelliJ IDEA のコア機能を拡張します。彼ら:バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産...

TypeScriptツールウィンドウ

IntelliJ IDEAがこのツールウィンドウを表示するのは、TypeScriptに従って、TypeScriptページでTypeScript言語サービスがアクティブになっている場合のみです。このツールウィンドウを使用して、TypeScriptコードを検証およびコンパイルします。TypeScript...