TypeScript の実行とデバッグ

1. Ctrl+Alt+S を押して設定を開き、 言語 & フレームワーク | TypeScript を選択します。

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

tsconfig.json ファイルを作成する

1. プロジェクト ツールウィンドウ（Alt+1 ）で、TypeScript コードがあるフォルダー（ほとんどの場合はプロジェクトのルートフォルダー）を選択し、コンテキストメニューから 新規 | tsconfig.json ファイル を選択します。

2. コンパイル時にソースマップを生成するには、 sourceMap プロパティが true に設定されていることを確認してください。

3. オプション:

   プロジェクト全体であるデフォルトのコンパイルスコープを上書きするには、 files プロパティを追加し、処理するファイルの名前を次の形式で入力します。

   "files" : ["<file1.ts>","<file2.ts>"],

tsconfig.json のスコープを構成する

プロジェクト内の複数ファイルに対し、異なる TypeScript 構成を適用する必要がある場合があります。

各フォルダー内のすべてのファイルが同じ構成に従って処理されるようにソースを配置しても問題ありません。 このような場合、フォルダーごとに個別の tsconfig.json を作成するだけで済みます。

ただし、同じフォルダーに保存されているファイルに異なるルールを適用する場合は、複数の構成ファイルを作成し、それらのスコープを構成する必要があります。

1. tsconfig*.json 構成ファイルを必要な数だけ作成します。

2. 設定 ダイアログ (Ctrl+Alt+S) を開き、 エディター | ファイルタイプ に移動し、これらすべてのファイルの名前が TypeScript 構成 ファイル名パターンリストのパターンと一致することを確認します。

   必要に応じて、 ファイルの種類の関連付けを追加するの説明に従ってパターンを追加します。

   

3. 各 *tsconfig*.json で、その設定に従って処理するファイルを指定します。

   • files フィールドに明示的にファイル名をリストします。

     "files" : ["<file1.ts>","<file2.ts>"],

     TSConfig リファレンス: ファイル(英語)の詳細を参照してください。

   • include フィールドで、ファイル名またはパターンを指定します。

     "include" : ["<pattern1>, <pattern2>"]

     TSConfig リファレンス: 含める(英語)の詳細を参照してください。

   • 名前が include フィールドにリストされたパターンと一致する一部のファイルをスキップするには、その名前またはパターンを exclude フィールドにリストします。

     "exclude" : ["<pattern3>, <pattern4>"]

     TSConfig リファレンス: 除外(英語)の詳細を参照してください。

tsc スクリプトを使用して TypeScript をコンパイルする

1. package.json ファイル内の scripts セクションに、以下の行を追加してください。

   • tsc - tsconfig.json で定義された範囲内のすべてのファイルをコンパイルします。

   • tsc <path to a file> - 特定のファイルをコンパイルします。

   • tsc <glob pattern> - パターンに一致するすべてのファイルをコンパイルするには、例えば、 tsc production/src/*.ts。

   TypeScript オフィシャル Web サイト(英語)の詳細を参照してください。

2. スクリプトの横にあるガター内の をクリックし、 「<script name>」を実行； を選択します。

コンパイルエラーは 実行 ツールウィンドウに表示されます。

変更時の自動コンパイル

• 言語 & フレームワーク | TypeScript 設定ページ Ctrl+Alt+S を開き、 変更時に再コンパイルする チェックボックスを選択します。

1. TypeScript コードを JavaScript にコンパイルします。

2. エディターで、生成された JavaScript ファイルへの参照を含む HTML ファイルを開きます。 この HTML ファイルは、必ずしもアプリケーションの開始ページを実装するものである必要はありません。

3. 次のいずれかを実行します：

   • メインメニューから 表示 | ブラウザーで開く を選択するか、 Alt+F2 を押します。 次にリストから目的のブラウザーを選択します。

   • コードの上にカーソルを置くと、ブラウザーのアイコンバー が表示されます。 目的のブラウザーを示すアイコンをクリックします。

1. JavaScript デバッガーの構成 の説明に従って、組み込みデバッガーを構成します。

2. ソースマップの生成を有効にするには、 tsconfig.json ファイルを作成するに従って、 tsconfig.json を開き、 sourceMap プロパティを true に設定します。

3. TypeScript コードの ブレークポイントの設定と設定。

4. アプリケーションを 開発モードで実行します。 多くの場合、そのために npm start を実行する必要があります。

   ほとんどの場合、この段階で TypeScript は JavaScript にコンパイルされ、ソースマップが生成されます。 詳細については、 TypeScript を JavaScript にコンパイルをご参照ください。

   開発サーバーの準備ができたら、ブラウザーでアプリケーションが実行されている URL アドレスをコピーします。実行 / デバッグ構成でこの URL アドレスを指定する必要があります。

5. 実行 | 実行構成の編集 に進みます。 または、ツールバーの 実行 ウィジェットから 実行構成の編集 を選択します。

   

   開いた 実行構成の編集 ダイアログで、ツールバーの 追加 ボタン () をクリックし、リストから JavaScript デバッグ を選択します。 開いた Run/Debug Configuration: JavaScript Debugダイアログで、アプリケーションが実行されている URL アドレスを指定します。 この URL は、上記の ステップ 3 に従って、ブラウザーのアドレスバーからコピーできます。

   

6. ツールバーの 実行 ウィジェットリストから、新しく作成した 構成を選択し、その横にある をクリックします。 実行構成で指定した URL アドレスがブラウザーで開き、 デバッグツールウィンドウが表示されます。

   デバッグ ツールウィンドウでコントロールを使用できるようにするには、ブラウザーでページをリフレッシュする必要がある場合があります。

7. デバッグ ツールウィンドウで、通常どおり操作してください： プログラムをステップ実行、 実行の停止および再開、 中断時に調査 、コールスタックや変数の確認、ウォッチの設定、変数の評価、 HTML DOM の確認などができます。