TL;DR
- 多くのブラウザや IDE はソースマップをサポートしているので、TypeScript のデバッグにはこれを使う。
- ソースマップは公開しない。
declarationMapを有効にすると、型宣言から元のソースへ移動できるようになる。
内容
ソースマップを生成する
ソースマップのファイル（.js.map）を作るには、tsconfig.json に次の設定を追加する。
{
"compilerOptions": {
"sourceMap": true
}
}ソースマップの注意点
TypeScript とバンドラやミニファイアを併用している場合は、それらのツールの設定も必要になることがある。これらのツールは自分でソースマップを生成することがある。TypeScript を組み込みでサポートしていれば、元の TypeScript のソースに対応付けられるはずだが、そうでなければ設定を変える必要がある。
また、ソースマップには元のコードのコピーが含まれることがあり、公開するつもりのなかった内容まで公開してしまうので、ソースマップは公開しない。
Node.js をデバッグする
TypeScript で書いた Node.js のコードも、DevTools でデバッグできる。Chromium 系のブラウザでは、次の手順で行う。
node --inspect-brk index.tsを実行する。--inspect-brkは、リモートデバッグプロトコル用の WebSocket のポートを開くだけでなく、コードの先頭で実行を一時停止するchrome://inspectを開き、リモートターゲットが表示されていることを確認する- 「inspect」のリンクをクリックすると DevTools が立ち上がる
型宣言のソースマップ
declaration を有効にして .d.ts ファイルを生成するときは、declarationMap も有効にしておくと、型宣言を元のソースに対応付ける .d.ts.map ファイルも生成される。これは特にプロジェクト参照を使っている場合に、IDE の「定義へ移動」のような言語サービスの機能を改善するのに役立つ。