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. 以下のいずれか 1 つを実行します:

   • メインメニューから表示 | ブラウザーで開くを選択するか、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 を表示するなどします。