TypeScript の実行とデバッグ

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

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

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

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

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

3. オプション:

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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

手動コンパイル

1. ステータスバーの 言語サービス ウィジェットをクリックします。

2. をクリックします。

   

   TypeScript のコンパイル ポップアップで、次のいずれかのオプションを選択します。

   • アプリケーション全体の TypeScript コードをコンパイルするには、 すべてをコンパイル を選択します。

     または、開いている TypeScript ファイルのコンテキストメニューから TypeScript のコンパイル を選択します。

     

   • 1 つのファイルをコンパイルするには、 TypeScript のコンパイル ポップアップでそのファイルへのパスを選択します。

     

   • カスタムスコープからファイルをコンパイルするには、 上記のように、ファイルが tsconfig.json の ファイル プロパティにリストされていることを確認します。

     TypeScript のコンパイル ポップアップで、 tsconfig.json へのパスを選択します。

     

変更時の自動コンパイル

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

   

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

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

7. デバッグ ツールウィンドウで、通常どおり続行します： プログラムをステップ実行し、 プログラムの実行を停止して再開し、 中断時に調べ 、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、 実際の HTML DOM を表示します。