🐥
トランスコンパイルした JavaScript のエラーが TypeScript のどの部分であるか調べる
背景
TypeScript でスクリプトを実装して node
で実行する際は一度 JavaScript にトランスコンパイルする必要があります。
トランスコンパイルされた JavaScript のスクリプトは当然ですが TypeScript と記載されているコードが異なりますので JavaScript のコードを実行した時に仮に以下のようなエラーが表示されても TypeScript のコードで同じ行でエラーが起きているわけではありません。
npx tsc foo.ts # foo.js が作成される
node foo.js # foo.js を実行
Error: Not Found
at /work/foo.js:105:31 # 105 行目でエラーが出ているが TypeScript ではどこなのかわからない
at step (/work/foo.js:33:23)
at Object.next (/work/foo.js:14:53)
at fulfilled (/work/foo.js:5:58)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
このような場合エラーやバグの原因を特定するのが大変なので TypeScript のどの行でエラーが起きているか表示する方法を調べてまとめました。私のような初学者の方の助けになれば幸いです。
方法
TypeScript と JavaScript の間の対応をまとめているソースマップというものがあり、 --sourceMap
オプションをつけることで作成できます。
npx tsc foo.ts --sourceMap # foo.js と foo.js.map が作成される
さらに node
実行時に --enable-source-maps
オプションをつけることでこのソースマップを参照しエラーの一部を TypeScript に変換してくれます。
node --enable-source-maps foo.js
Error: Not Found
at <anonymous> (/work/foo.ts:67:11) # 67 行目でエラーが出ていることがわかります
at step (/work/foo.js:33:23)
at Object.next (/work/foo.js:14:53)
at fulfilled (/work/foo.js:5:58)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
実行時のオプションではなく tsconfig.json
で設定したい場合は以下のように記載しておけばよいようです。
{
"compilerOptions": {
"sourceMap": true
}
}
まとめ
ソースマップを用いることで TypeScript のどの箇所でエラーが生じているか知ることができました。
同じことで悩んでいる方の一助になれば幸いです。
Discussion