TypeScript の実行とデバッグ
RustRover で TypeScript コードの実行とデバッグができます。
クライアント側 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プロパティを追加し、処理するファイルの名前を次の形式で入力します。"files" : ["<file1.ts>","<file2.ts>"],
tsconfig.json のスコープを構成する
プロジェクト内の異なるファイルごとに異なる TypeScript 構成を適用する必要がある場合があります。
各フォルダー内のすべてのファイルが同じ構成に従って処理されるようにソースを配置しても問題ありません。 このような場合、フォルダーごとに個別の tsconfig.json を作成するだけで済みます。
ただし、同じフォルダーに保存されているファイルに異なるルールを適用する場合は、複数の構成ファイルを作成し、それらのスコープを構成する必要があります。
tsconfig*.json 構成ファイルを必要な数だけ作成します。
設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動し、これらすべてのファイルの名前が TypeScript 構成 ファイル名パターンリストのパターンと一致することを確認します。
各 *tsconfig*.json で、その設定に従って処理するファイルを指定します。
filesフィールドに明示的にファイル名をリストします。"files" : ["<file1.ts>","<file2.ts>"],TSConfig リファレンス: ファイル(英語)の詳細を参照してください。
包括フィールドで、ファイル名またはパターンを指定します。"include" : ["<pattern1>, <pattern2>"]TSConfig リファレンス: 含める(英語)の詳細を参照してください。
名前が
包括フィールドにリストされたパターンと一致する一部のファイルをスキップするには、その名前またはパターンを除外フィールドにリストします。"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 コードをステップ実行することが可能になります。
アプリケーションが 内蔵の RustRover サーバーで実行されている場合は、上記の クライアント側の 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 アドレスがブラウザーで開かれ、 デバッグツールウィンドウが表示されます。デバッグ ツールウィンドウでコントロールを使用できるようにするには、ブラウザーでページをリフレッシュする必要がある場合があります。
デバッグ ツールウィンドウで、通常どおり操作してください： プログラムをステップ実行、 実行の停止・再開、 中断時の確認 、コールスタックや変数の確認、ウォッチの設定、変数評価、 実際の HTML DOM の表示などが可能です。