TypeScript の実行とデバッグ
IntelliJ IDEA を使用すると、Node.js で実行されているクライアント側の TypeScript コードと TypeScript コードを実行およびデバッグできます。
アプリケーションを実行またはデバッグする前に、TypeScript コードを JavaScript にコンパイルする必要があります。これは、ビルトイン TypeScript コンパイラーと、Node.js で TypeScript を実行するための ts-node(英語) など、他のツールを使用して実行できます。これは、個別に、またはビルドプロセスの一部として使用されます。
コンパイル中に、TypeScript コードと実際に実行される JavaScript コード間の対応を設定するソースマップ(英語)を生成することもできます。その結果、TypeScript コードにブレークポイントを設定し、タイプ JavaScript デバッグ（クライアント側コードの場合）または Node.js の実行 / デバッグ構成でアプリケーションを起動し、生成されたソースマップのおかげで元の TypeScript コードをステップ実行できます。
クライアント側の TypeScript アプリケーションを実行する
TypeScript でクライアントサイドアプリケーションを記述し、TypeScript を JavaScript にコンパイルするに従ってコードをコンパイルし、JavaScript で記述されたクライアントサイドアプリケーションとまったく同じ方法でアプリケーションを実行およびデバッグできます。唯一の違いは、TypeScript コードにブレークポイントを直接設定できることです。
エディターで、生成された JavaScript ファイルへの参照を含む HTML ファイルを開きます。この HTML ファイルは、必ずしもアプリケーションの開始ページを実装するものである必要はありません。
- 以下のいずれか 1 つを実行します:
メインメニューからを選択するか、Alt+F2 を押します。次にリストから目的のブラウザーを選択します。
コードの上にマウスポインターを移動して、ブラウザーアイコンバーを表示します。
目的のブラウザーを示すアイコンをクリックします。
クライアント側 TypeScript アプリケーションのデバッグ
ほとんどの場合、外部の開発 Web サーバー（たとえば、Node.js を使用）で実行されているクライアント側アプリケーションをデバッグすることができます。アプリケーションが内蔵の IntelliJ IDEA サーバーで実行されている場合は、上記のクライアント側の TypeScript アプリケーションを実行するを参照してください。組み込みサーバーで実行されている JavaScript と同じ方法でデバッグすることもできます。
外部 Web サーバーで実行されている TypeScript アプリケーションをデバッグする
JavaScript デバッガーの構成の説明に従って、組み込みデバッガーを構成します。
TypeScript コードのブレークポイントの設定と設定。
アプリケーションを開発モードで実行します。多くの場合、そのために
npm startを実行する必要があります。ほとんどの場合、この段階で TypeScript は JavaScript にコンパイルされ、ソースマップが生成されます。詳細については、TypeScript を JavaScript にコンパイルするを参照してください。
開発サーバーの準備ができたら、ブラウザーでアプリケーションが実行されている URL アドレスをコピーします。実行 / デバッグ構成でこの URL アドレスを指定する必要があります。
メインメニューからを選択し、ツールバーの
をクリックしてリストから JavaScript デバッグを選択します。表示される実行 / デバッグ構成: JavaScript デバッグダイアログで、アプリケーションが実行されている URL アドレスを指定します。この URL は、上記のステップ 3 に従って、ブラウザーのアドレスバーからコピーできます。ツールバーの実行 / デバッグ構成を選択リストで新しく作成された構成を選択し、
をクリックします。実行構成で指定された URL アドレスが選択したブラウザーで開き、デバッグツールウィンドウが表示されます。デバッグツールウィンドウで、通常どおりに続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断時に検査し、実際の HTMLDOM を表示します。
Node.js を使用したサーバー側 TypeScript アプリケーションの実行とデバッグ
IntelliJ IDEA を使用すると、Node.js 実行構成を介して Node.js でサーバー側の TypeScript コードを起動できます。TypeScript を JavaScript にコンパイルするに従って、実行またはデバッグする前に、TypeScript コードを JavaScript にコンパイルする必要があります。
Node.js でサーバー側 TypeScript を実行する
TypeScript コードを JavaScript にコンパイルします。詳細については、TypeScript を JavaScript にコンパイルするを参照してください。
Node.js 実行 / デバッグ構成を作成します。
メインメニューからを選択し、次に実行構成の編集ダイアログでツールバーの
をクリックし、リストから Node.js を選択します。開いた実行 / デバッグ構成: Node.js ダイアログで、使用する Node.js インタープリターを指定します。JavaScript ファイルフィールドで、それを起動するアプリケーションのメインファイルから生成されたコンパイル済みファイルを指定します。
Node.js の実行 / デバッグ構成の作成の詳細を参照してください。
ツールバーの実行 / デバッグ構成を選択リストから新しく作成した Node.js 設定を選択し、その隣にある
をクリックします。
Node.js を使用してサーバー側 TypeScript をデバッグする
TypeScript コードを JavaScript にコンパイルします。詳細については、TypeScript を JavaScript にコンパイルするを参照してください。
必要に応じて、TypeScript コードにブレークポイントを設定します。
上記の説明に従って、Node.js 実行 / デバッグ構成を作成します。
ツールバーの実行 / デバッグ構成を選択リストから新しく作成した Node.js 設定を選択し、その隣にある
をクリックします。デバッグツールウィンドウが開きます。ブレークポイントでコードの実行をトリガする手順を実行します。
IntelliJ IDEA に切り替えると、デバッグツールウィンドウのコントロールが有効になります。
ts-node を使用する
Node.js で単一の TypeScript ファイルを実行またはデバッグする必要がある場合は、TypeScript を JavaScript にコンパイルするに従ってコードをコンパイルする代わりに ts-node(英語) を使用できます。
ts-node をインストールする
埋め込みターミナル（Alt+F12）に次のように入力します。
npm install --save-dev ts-node
ts-node のカスタム Node.js 実行 / デバッグ構成を作成する
メインメニューからを選択し、次に実行構成の編集ダイアログでツールバーの
をクリックしてリストから Node.js を選択します。実行 / デバッグ構成: Node.js ダイアログが開きます。Node パラメーターフィールドに
--require ts-node/registerを追加します。使用する Node.js インタープリターを指定してください。これはローカル Node.js インタープリターまたは Windows Subsystem for Linux の Node.js です。
JavaScript ファイルフィールドで、実行またはデバッグするファイルを指定します。ワークフローに応じて、明示的にまたはマクロを使用してそれを行うことができます。
常に同じ TypeScript ファイルを起動する場合は、
をクリックして、表示されるダイアログでこのファイルを選択します。デフォルトでは、実行 / デバッグ構成は選択したファイルの名前を取得します。別のファイルを起動する必要がある場合は、
$FilePathRelativeToProjectRoot$と入力します。このマクロを使用すると、IntelliJ IDEA は常にアクティブなエディタータブでファイルを起動します。
オプション
ts-node に追加パラメーター（たとえば、
--project tsconfig.json）を渡すには、アプリケーションパラメーターフィールドに追加します。設定を保存します。
TypeScript ファイルを実行する
実行 / デバッグ構成で TypeScript ファイルを指定した方法に応じて、次のいずれかを実行します。
ファイル名を明示的に入力した場合は、プロジェクトツールウィンドウでファイルを選択するか、エディターで開いてから を選択します。
または、ツールバーのリストから必要な構成を選択し、リストの横にある
をクリックするか、Shift+F10 を押します。マクロを指定した場合は、エディターで TypeScript ファイルを開き、ツールバーのリストから新しく作成した構成を選択して、
をクリックするか、Shift+F10 を押します。
IntelliJ IDEA は、実行ツールウィンドウに出力を表示します。
TypeScript ファイルをデバッグする
デバッグする TypeScript ファイルで、必要に応じてブレークポイントを設定します。
実行 / デバッグ構成で TypeScript ファイルを指定した方法に応じて、次のいずれかを実行します。
ファイル名を明示的に入力した場合は、プロジェクトツールウィンドウでファイルを選択するか、エディターで開いてから を選択します。
または、ツールバーのリストから必要な構成を選択し、リストの横にある
をクリックするか、Shift+F9 を押します。マクロを指定した場合は、エディターで TypeScript ファイルを開き、ツールバーのリストから新しく作成した構成を選択して、リストの横にある
をクリックするか、Shift+F9 を押します。
関連ページ：
Angular
Angular は、クロスプラットフォームアプリケーションを構築するための一般的なフレームワークです。IntelliJ IDEA は Angular のサポートを提供し、新しい Angular アプリの作成やコンポーネントの作業からデバッグやテストまで、開発プロセスのすべてのステップで役立ちます。始める前に：Node.js をダウンロードしてインストールします。設定 / 環境設定 | プラグインページで Angular と AngularJS バンドルプラグインが有効になっていることを確認してください...
TypeScript を JavaScript にコンパイルする
ブラウザーと Node.js は JavaScript のみを処理するため、TypeScript コードを実行またはデバッグする前にコンパイルする必要があります。コンパイルでは、TypeScript コードと実際に実行される JavaScript コード間の対応を設定するソースマップを作成することもできます。IntelliJ IDEA には、TypeScript コンパイラーが組み込まれています。デフォルトでは、生成された JavaScript ファイルとソースマップを TypeScript フ...
Chrome での JavaScript のデバッグ
IntelliJ IDEA は、Chrome と連携する client-sideJavaScript コード用の組み込みデバッガーを提供します。以下のビデオと以下の説明は、このデバッガーを使い始めるための基本的なステップを示しています。始める前に：設定 / 環境設定 | プラグインページで JavaScript デバッガーバンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。組み込みサーバーで実行されているアプリケーションのデバッグ：In...
JavaScript デバッガーの構成
IntelliJ IDEA での JavaScript のデバッグは、JavaScript デバッガープラグインを介してサポートされます。JavaScript デバッガープラグインは IntelliJ IDEA にバンドルされており、デフォルトでアクティブになっています。プラグインが無効になっている場合は、プラグインの管理に従って、設定 / 環境設定 | プラグインページでプラグインを有効にします。JavaScript コードのデバッグは、Google Chrome および Chrome ファミリの他...
デバッグツールウィンドウ
デバッガーセッションを開始すると、デバッグツールウィンドウが表示されます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ（フレーム、スレッド、変数など）を表示して分析し、さまざまなデバッガーアクションを実行します。これは、デバッグツールウィンドウの概要です。ツールウィンドウの使用に関する一般的な手順については、ツールウィンドウを参照してください。デフォルトでは、プログラムがブレークポイントに到達するとデバッグツールウィンドウが開き、セッションが終了しても非表示にはなりま...
デバッガーセッションを開始する
デバッガーセッションの開始は、通常モードでのプログラムと非常に似ています。デバッガーはバックグラウンドで接続されているため、デバッガーセッションを開始するために特別な設定を行う必要はありません。IntelliJ IDEA からプログラムを実行できる場合は、同じ構成を使用してプログラムをデバッグすることもできます。このトピックは、実行 / デバッグ構成の理解に依存しています。IntelliJ IDEA は追加のセットアップなしで単純なアプリケーションをデバッグする方法を提供しますが、デバッガーを効...