TypeScript の実行とデバッグ
RubyMine を使用すると、Node.js で実行されるサーバー側 TypeScript コードと、ブラウザーで実行されるクライアント側 TypeScript コードの両方を実行し、デバッグできます。
サーバー側 TypeScript の実行とデバッグ
RubyMine を使用すると、事前に JavaScript にコンパイルせずにサーバー側 TypeScript コードを実行・デバッグできます。
サーバー側複数 TypeScript ファイルアプリケーションの実行およびデバッグには、RubyMine は組み込みローダーを使用します。 単一のファイルを実行またはデバッグする場合は、実行 / デバッグ構成の TypeScript ローダー リストから なし を選択してローダーをオフにすることができます。
始める前に
コンピューターに Node.js(英語) 18 以上がインストールされていることを確認してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 Node.js および JavaScript Debugger プラグインを 設定 | プラグイン ページの Marketplace タブにインストールします。
サーバー側の TypeScript コードを実行する
サーバー側の TypeScript は、 プロジェクト ツールウィンドウ（Alt+1 ）、エディター、 実行 ウィジェットから実行できます。
プロジェクト ツールウィンドウ（Alt+1 ）で、実行する TypeScript ファイルまたはアプリケーションの起動ファイルを右クリックし、コンテキストメニューから を選択します。
エディターで、実行する TypeScript ファイルまたはアプリケーションの開始ファイルを開き、リストから を選択します。
エディターで、実行する TypeScript ファイルまたはアプリケーションの開始ファイルを開きます。 次に、ツールバーの 実行 ウィジェットから 現在のファイル を選択し、その横にある
をクリックします。または、 実行 ウィジェットから 以前に作成した実行 / デバッグ構成を選択し、その横にある
をクリックします。
TypeScript スクラッチファイルを実行する
スクラッチファイルを実行するには、上記のメソッドに加えて、ガターの をクリックし、リストから必要なアクションを選択できます。
自動生成された一時的な実行 / デバッグ構成
サーバー側 TypeScript コードの実行方法がどれであっても、RubyMine は保存、編集、再利用できる Node.js タイプの一時的な実行 / デバッグ構成を作成します。
詳細は 実行 / デバッグ構成を参照してください。
サーバー側の TypeScript コードをデバッグする
サーバー側の TypeScript のデバッグは、 プロジェクト ツールウィンドウ (Alt+1 )、エディター、 実行 ウィジェットから行うことができます。
必要に応じて ブレークポイントを設定します。
プロジェクト ツールウィンドウで、デバッグする TypeScript ファイルまたはアプリケーションの開始ファイルを右クリックし、コンテキストメニューから を選択します。
必要に応じて ブレークポイントを設定します。
エディターで、デバッグする TypeScript ファイルまたはアプリケーションの開始ファイルを開き、コンテキストメニューから を選択します。
必要に応じて ブレークポイントを設定します。
エディターで、デバッグする TypeScript ファイルまたはアプリケーションの開始ファイルを開きます。 次に、ツールバーの 実行 ウィジェットから 現在のファイル を選択し、その横にある
をクリックします。または、 実行 ウィジェットから 以前に作成した実行 / デバッグ構成を選択し、その横にある
をクリックします。
TypeScript スクラッチファイルのデバッグ
スクラッチファイルをデバッグするには、上記のメソッドに加えて、ガターの をクリックし、リストから必要なアクションを選択できます。
ts ノードを使用する
Node.js で単一の TypeScript ファイルを実行またはデバッグする必要がある場合は、 ts-node を使用して、 TypeScript を JavaScript にコンパイルに記載されているようなコードのコンパイルを省略できます。
ts-node をインストールする
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install --save-dev ts-node
ts-node のカスタム Node.js 実行 / デバッグ構成を作成する
に進みます。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。
開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン (
) をクリックし、リストから Node.js を選択します。 実行 / デバッグ構成：Node.jsダイアログが開きます。ノードパラメーター フィールドに
--require ts-node/registerを追加します。使用する Node.js ランタイムを指定します。
プロジェクト エイリアスを選択すると、RubyMine は ノードランタイム フィールドから JavaScript ランタイム ページのプロジェクトデフォルトインタープリターを自動的に使用します。 ほとんどの場合、RubyMine がプロジェクトのデフォルトランタイムを検出し、自動的にそのフィールドに入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。ファイル フィールドで、実行またはデバッグする TypeScript ファイルを指定します。 ワークフローに応じて、明示的に行うか、 マクロを使用して行うことができます。
常に同じ TypeScript ファイルを起動する場合は、
をクリックして、表示されるダイアログでこのファイルを選択します。 デフォルトでは、実行 / デバッグ構成は選択したファイルの名前を取得します。別のファイルを起動する必要がある場合は、
$FilePathRelativeToProjectRoot$と入力します。 この マクロにより、RubyMine は常にアクティブなエディタータブのファイルを起動します。
必要に応じて、 アプリケーションパラメーター フィールドに
ts-nodeの追加パラメーター (--project tsconfig.jsonなど) を指定します。構成を保存します。
ts-node でサーバー側 TypeScript を実行する
実行 / デバッグ構成で TypeScript ファイルを指定した方法に応じて、次のいずれかを実行してください：
ファイル名を明示的に入力した場合は、ツールバーの 実行 ウィジェットから必要な構成を選択し、リストの横にある
をクリックするか、 Shift+F10 を押します。マクロを指定した場合は、エディターで実行する TypeScript ファイルを開き、ツールバーの 実行 ウィジェットから 新しく作成された構成を選択し、
をクリックするか、 Shift+F10 を押します。
RubyMine は 実行 ツールウィンドウに出力を表示します。
ts-node でサーバー側 TypeScript をデバッグする
デバッグする TypeScript ファイルで、必要に応じて ブレークポイントを設定します。
実行 / デバッグ構成で TypeScript ファイルを指定した方法に応じて、次のいずれかを実行してください：
ファイル名を明示的に入力した場合は、ツールバーの 実行 ウィジェットから必要な構成を選択し、
をクリックするか、 Shift+F9 を押します。マクロを指定した場合は、エディターでデバッグする TypeScript ファイルを開き、 実行 ウィジェットから 新しく作成された構成を選択して、
をクリックするか、 Shift+F9 を押します。
クライアント側 TypeScript の実行とデバッグ
ブラウザーは JavaScript のみを処理するため、実行またはデバッグする前に クライアント側の TypeScript コードをコンパイルするを実行する必要があります。
コンパイルでは、TypeScript コードと実際に実行される JavaScript コード間の対応を設定する ソースマップ(英語)を作成することもできます。
TypeScript を JavaScript にコンパイルする
tsc スクリプトを使用してコンパイルを実行するか、 webpack(英語)、 babel(英語) 、またはその他のツールなどを使用してビルドプロセスを構成できます。 詳細については、 webpack、TypeScript(英語)、 Babel と TypeScript(英語) を参照してください。
始める前に
Ctrl+Alt+S を押して設定を開き、 を選択します。
TypeScript 言語サービス チェックボックスが選択されていることを確認してください。
tsconfig.json を作成して設定する
デフォルトでは、組み込みコンパイラーは、デバッグセッション中に TypeScript コードをステップスルーできるソースマップを作成しません。 コンパイラーは、デフォルトで、アクティブなエディタータブの TypeScript ファイル、または現在のプロジェクトのすべての TypeScript ファイルも処理します。
tsconfig.json ファイルを使用すると、このデフォルトの動作を変更して、ソースマップを生成し、カスタムスコープのファイルのみをコンパイルできます。
tsconfig.json ファイルを作成する
プロジェクト ツールウィンドウ（Alt+1 ）で、TypeScript コードがあるフォルダー（ほとんどの場合はプロジェクトのルートフォルダー）を選択し、コンテキストメニューから を選択します。
コンパイル時にソースマップを生成するには、
sourceMapプロパティがtrueに設定されていることを確認してください。オプション:
プロジェクト全体であるデフォルトのコンパイルスコープを上書きするには、
ファイルプロパティを追加し、処理するファイルの名前を次の形式で入力します。"files" : ["<file1.ts>","<file2.ts>"],
tsconfig.json のスコープを構成する
プロジェクト内の異なるファイルに、異なる TypeScript 構成を適用する必要がある場合があります。
各フォルダー内のすべてのファイルが同じ構成に従って処理されるようにソースを配置しても問題ありません。 このような場合、フォルダーごとに個別の tsconfig.json を作成するだけで済みます。
ただし、同じフォルダーに保存されているファイルに異なるルールを適用する場合は、複数の構成ファイルを作成し、それらのスコープを構成する必要があります。
tsconfig*.json 構成ファイルを必要な数だけ作成します。
設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動し、これらすべてのファイルの名前が TypeScript 構成 ファイル名パターンリストのパターンと一致することを確認します。
必要に応じて、 ファイルの種類の関連付けを追加するの説明に従ってパターンを追加します。
各 *tsconfig*.json で、その設定に従って処理するファイルを指定します。
ファイルフィールドに明示的にファイル名をリストします。"files" : ["<file1.ts>","<file2.ts>"],TSConfig リファレンス: ファイル(英語)の詳細を参照してください。
含めるフィールドで、ファイル名またはパターンを指定します。"include" : ["<pattern1>, <pattern2>"]TSConfig リファレンス: 含める(英語)の詳細を参照してください。
名前が
含めるフィールドにリストされたパターンと一致する一部のファイルをスキップするには、その名前またはパターンをexcludeフィールドにリストします。"exclude" : ["<pattern3>, <pattern4>"]TSConfig リファレンス: 除外(英語)の詳細を参照してください。
TypeScript コードのコンパイル
tsc スクリプトを使用してコンパイルを実行するか、 webpack(英語)、 babel(英語) 、またはその他のツールなどを使用してビルドプロセスを構成できます。 詳細については、 webpack、TypeScript(英語)、 Babel と TypeScript(英語) を参照してください。
tsc スクリプトを使用して TypeScript をコンパイルする
package.json ファイル内の
scriptsセクションに、以下の行を追加してください。tsc- tsconfig.json で定義された範囲内のすべてのファイルをコンパイルします。tsc <path to a file>- 特定のファイルをコンパイルします。tsc <glob pattern>- パターンに一致するすべてのファイルをコンパイルするには、例えば、tsc production/src/*.ts。
TypeScript オフィシャル Web サイト(英語)の詳細を参照してください。
スクリプトの横にあるガター内の
をクリックし、 「<script name>」スクリプトを実行； を選択します。
コンパイルエラーは 実行 ツールウィンドウに表示されます。
変更時の自動コンパイル
言語 & フレームワーク | TypeScript 設定ページ  Ctrl+Alt+S を開き、 変更時に再コンパイルする チェックボックスを選択してください。
クライアント側の TypeScript アプリケーションを実行する
ブラウザーは JavaScript のみを処理するため、クライアント側の TypeScript コードを実行する前にコンパイルする必要があります。
クライアント側 TypeScript を実行する
エディターで、生成された JavaScript ファイルへの参照を含む HTML ファイルを開きます。 この HTML ファイルは、必ずしもアプリケーションの開始ページを実装するものである必要はありません。
次のいずれかを実行してください：
メインメニューから を選択するか、 Alt+F2 を押します。 次にリストから目的のブラウザーを選択します。
コードの上にカーソルを置くと、ブラウザーのアイコンバー
が表示されます。 目的のブラウザーを示すアイコンをクリックします。
クライアント側 TypeScript のデバッグ
ブラウザーは JavaScript のみを処理するため、デバッグする前に クライアント側の TypeScript コードをコンパイルするを実行する必要があります。
コンパイル時に、TypeScript コードと実際に実行される JavaScript コードとの対応関係を設定する ソースマップ(英語)も生成されます。 これにより、TypeScript コードにブレークポイントを設定し、アプリケーションを起動してから、生成されたソースマップを利用して元の TypeScript コードをステップ実行することが可能になります。
アプリケーションが 内蔵の RubyMine サーバーで実行されている場合は、上記の クライアント側の TypeScript アプリケーションを実行するを参照してください。 組み込みサーバーで実行されている JavaScript と同じ方法でデバッグすることもできます。
外部 Web サーバーで実行されている TypeScript アプリケーションをデバッグする
多くの場合、Node.js などで実行されている外部開発 Web サーバー上のクライアントサイドアプリケーションをデバッグすることが必要になる場合があります。
JavaScript デバッガーの構成 の説明に従って、組み込みデバッガーを構成します。
ソースマップの生成を有効にするには、 tsconfig.json ファイルを作成するに従って、 tsconfig.json を開き、
sourceMapプロパティをtrueに設定します。TypeScript コードの ブレークポイントの設定と設定。
アプリケーションを 開発モードで実行します。 多くの場合、そのために
npm startを実行する必要があります。ほとんどの場合、この段階で TypeScript は JavaScript にコンパイルされ、ソースマップが生成されます。 詳細は TypeScript を JavaScript にコンパイルを参照してください。
開発サーバーの準備ができたら、ブラウザーでアプリケーションが実行されている URL アドレスをコピーします。実行 / デバッグ構成でこの URL アドレスを指定する必要があります。
に進みます。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。
開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン (
) をクリックし、リストから JavaScript デバッグ を選択します。 開いた 実行 / デバッグ構成: JavaScript デバッグダイアログで、アプリケーションが実行されている URL アドレスを指定します。 この URL は、上記の ステップ 3 に従って、ブラウザーのアドレスバーからコピーできます。
ツールバーの 実行 ウィジェットリストから、新しく作成した 構成を選択し、その横にある
をクリックします。 実行構成で指定された URL アドレスがブラウザーで開き、 デバッグツールウィンドウが表示されます。Debug ツールウィンドウでコントロールを使用できるようにするには、ブラウザーでページをリフレッシュする必要がある場合があります。
Debug ツールウィンドウで、通常どおり操作します： プログラムをステップ実行、 実行の停止・再開、 中断時の調査 、コールスタックや変数の確認、ウォッチの設定、変数の評価、 実際の HTML DOM の表示などが可能です。