このスライドの内容がとてもよかった。（ブッ刺さった）

• tsconfig.json の設定を見直そう！フロントエンド向け　 2024 夏 - Speaker Deck

古い設定を更新したのでそのときのメモ。

環境

• typescript v5
• webpack v5
  • webpack.config.js は自前で実装
  • Next や CRA とかではない
• commonjs/require の記述があちこちに残っている状態
• 実行環境はブラウザのみ(あとは jest/jsdom)

baseUrl

typescript の v4 から設定不要になっていたらしい。 最初にいれてそのままだったので削除しておく。

moduleResolution=bundler

• node になっていた
  • package.json#exports は読めてると思っていた 💦
• ESM 以降でハマらないで済むこともありそうなので、明示的に変更しておく

tsconfig#paths は消せる?

webpack.config.js#resolve をつかってくれるのなら、 tsconfig#paths は消していいのかなと思ったけど、そういうのはやってないようだった。

tsconfig-paths-webpack-plugin を入れてもいいけど、alias のつけ外しは滅多にないので必要性がない。

• dividab/tsconfig-paths-webpack-plugin: Load modules according to tsconfig paths in webpack.

module

"preserve" にして tsc の実行後にも import がトランスパイル時にもそのままになるように。

import/require 周りの実装は webpack で解決している。 （設定項目の説明を読む限りでは）こちらのほうが tsc と webpack の役割分担がシンプルなはず。

なお、typescript v5.3 だと preserve は利用できなかった。v5.4 から。

In --module preserve (added in TypeScript 5.4),

target

だいぶまえに IE11 をサポートするために caniuse をみながら es5 にした覚えがある。が、いまになって「IE11 で使えないよ!」と怒る人もいない（怒られても対応する義理もない）ので ES2015 あげてしまうことにする。

esnext でも動くかもだけど、アロー関数と class 以降に文法的に大きい変化が思い当たらなかった。 とりあえず ES2015 でもいいかなと。

というか 2015 ってもうすぐ 10 年前な

lib

{es2023 => ESNext} にしておいてよいような気がしたので変更。

参考

• TypeScript: TSConfig Reference - Docs on every TSConfig option