TypeScriptをv5からv7に アップデートした話

Transcript

1. TypeScriptをv5からv7に アップデートした話 いに TSKaigi Mashup #5 any
2. いに ピザと蕎麦が大好きな フロントエンドエンジニア
3. ついにきましたねtsgo!
4. 今日はTypeScriptを v7に上げるまでにつまづいたことを話します
5. アジェンダ 1. 開発環境について 2. v5 → v6 3. v6 → v7
6. chapter 1 開発環境について
7. ざっくりとした開発環境 npmでバージョン管理 TypeScript v5.2.2 Next.js ESlint jest
8. chapter 2 v5 → v6
9. baseUrl非推奨による副作用 ローカルのdevサーバーが壊れる 🤯 ts-nodeとtsconfig-pathsを使っていたが、tsconfig-pathsがbaseUrlを絶対 パスのベースとして扱う実装になっている。
10. baseUrl非推奨による副作用 なぜtsconfig-pathが必要？ tscはpathsの@/components/*のようなパスエイリアスをコンパイル時の 型チェックにしか使わない 出力されるJSはエイリアスのまま... 実行時にモジュール解決をするのにtsconfig-pathが必要
11. baseUrl非推奨による副作用 ts-nodeからtsxに移行 tsxはtsconfigの解析にget-tsconfigを使うので、baseUrlがなくても動く tsxはesbuildeでTypeScriptをトランスパイルをして、実行時に型チェック をしないためts-nodeと比較して高速 🏃
12. moduleResolutionをbundlerに変えた影響 元々moudleResolutionにはnode10を使っていた node10はpackage.jsonのexportsフィールド非対応 古いライブラリにはサブパスにtypesフィールドがなかった node10では検知できなかったが、bundlerに変えてからエラーとして検知 できるようになった 🙆🏻‍♀️ ライブラリのバージョンアップによって解決
13. jsのlintでOOMが発生 ※これはTypeScriptのバージョンアップは関係ない話 8000ファイルのimport/orderが全て落ちていた eslint-import-resolver-typescriptがなくなっていた...
14. jsのlintでOOMが発生 eslint-import-resolver-typescriptはpackage.jsonに明記されておらず、 eslint-config-nextに依存していたので動いていた(幽霊依存) lock.jsonの再生成のタイミングでeslint-import-resolver-typescriptの依存 が消えてしまったのが原因 installをしてpackage.jsonに追加したら解決 💯
15. jsのlintでOOMが発生 import/no-extraneous-dependenciesでpackage.jsonにないimportを検知 できるが、あくまで対象はソースコード内 knipはESlintの設定ファイルから使用するプラグインがpackage.jsonに存 在するかまで検知してくれる ✂️ pnpmならこのような幽霊依存は防げる
16. chapter 3 v6 → v7
17. v6と並列で実行 今回のバージョンアップはCLIとしてのtscしか提供されていない TypeScript Compiler APIはまだ提供されていない Compiler APIに依存するtypescript-eslintはv7のままでは動かない... v6の互換性を担保した@typescript/typescript6が提供されている tscのみv7で実行できる
18. next buildの型チェック Next.jsのビルドは内部で型チェックを行うがv7は未対応 It looks like you're trying to use TypeScript but do not have the required package(s) installed. ①ignoreBuildErrorsで型チェックを無効にし、tscで型チェックをする ②next@16.3.0-canary.83のuseTypeScriptCliを使う 安定版を待つのが良さそう... 🤔
19. おしまい