🐥

トランスコンパイルした JavaScript のエラーが TypeScript のどの部分であるか調べる

2025/01/16に公開

背景

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 のどの箇所でエラーが生じているか知ることができました。
同じことで悩んでいる方の一助になれば幸いです。

Cykinso's Tech Blog

Discussion