IntelliJ IDEA 2021.1 ヘルプ

TypeScript

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

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

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

始める前に

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

TypeScript を確認する

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

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

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

Inspection widget

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

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

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

    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 に移動します。

    または、状況バーの TypeScript ウィジェットをクリックして、TypeScript の設定を選択します。

    TypeScript widget

    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 言語サービスを再起動する

  • 状況バーの TypeScript ウィジェットをクリックし、リストから TypeScript サービスを再開するを選択します。

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

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 を介してインストールするように通知し、それに応じて package .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 の実行とデバッグの詳細を参照してください。

関連ページ:

コード補完 | IntelliJ IDEA

このセクションでは、コーディングプロセスのスピードアップを可能にするコンテキスト対応コード補完のさまざまなテクニックについて説明します。基本補完:基本コード補完は、可視性スコープ内のクラス、メソッド、フィールド、キーワードの名前を完成させるのに役立ちます。コード補完を呼び出すと、IntelliJ IDEA はコンテキストを分析し、現在のキャレット位置から到達可能な選択肢を提案します(提案にはライブテンプレートも含まれます)。基本コード補完がフィールド、パラメーター、または変数宣言の一部に適用さ...

コードインスペクション | IntelliJ IDEA

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

インテンションアクション | IntelliJ IDEA

エディターで作業するときに、IntelliJ IDEA はコードを分析し、コードを最適化する方法を検索し、潜在的な問題と実際の問題を検出します。IDE がコードを変更する方法を見つけるとすぐに、エディターの現在の行の横に黄色いバルブアイコンが表示されます。このアイコンをクリックすると、このコード単位で使用可能なインテンションアクションを表示できます。インテンションアクションは、警告から最適化の提案まで、幅広い状況をカバーします。インテンションの完全なリストを表示し、設定 / 環境設定ダイアログ...

TypeScript のリファクタリング | IntelliJ IDEA

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

TypeScript ツールウィンドウ | IntelliJ IDEA

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

TypeScript を JavaScript にコンパイルする | IntelliJ IDEA

ブラウザーと Node.js は JavaScript のみを処理するため、TypeScript コードを実行またはデバッグする前にコンパイルする必要があります。コンパイルでは、TypeScript コードと実際に実行される JavaScript コード間の対応を設定するソースマップを作成することもできます。IntelliJ IDEA には、TypeScript コンパイラーが組み込まれています。デフォルトでは、生成された JavaScript ファイルとソースマップを TypeScript フ...