TypeScript の実行とデバッグ

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

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

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

1. Project ツールウィンドウ（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 リファレンス: 除外(英語)の詳細を参照してください。

Compile TypeScript with a tsc script

1. In your package.json file, add the following line to the scripts section:

   • tsc - to compile all files in the scope that is defined in tsconfig.json .

   • tsc <path to a file> - to compile a specific file.

   • tsc <glob pattern> - to compile all files that meet the pattern, for example, tsc production/src/*.ts.

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

2. Click in the gutter next to the script and select 「<script name>」を実行.

Compilation errors are reported in the 実行 tool window.

変更時の自動コンパイル

• 言語 & フレームワーク | 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 デバッグ を選択します。 開いた 実行/デバッグ構成：JavaScript デバッグダイアログで、アプリケーションが稼働している URL アドレスを指定してください。 この URL は、上記の ステップ 3 に従って、ブラウザーのアドレスバーからコピーできます。

   

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

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

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