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

TypeScriptをv5からv7にアップデートした話いに TSKaigi Mashup #5 any

いにピザと蕎麦が大好きなフロントエンドエンジニア

ついにきましたねtsgo!

今日はTypeScriptを v7に上げるまでにつまづいたことを話します

アジェンダ 1. 開発環境について 2. v5 → v6 3. v6 →
v7

chapter 1 開発環境について

ざっくりとした開発環境 npmでバージョン管理 TypeScript v5.2.2 Next.js ESlint jest

chapter 2 v5 → v6

baseUrl非推奨による副作用ローカルのdevサーバーが壊れる 🤯 ts-nodeとtsconfig-pathsを使っていたが、tsconfig-pathsがbaseUrlを絶対パスのベースとして扱う実装になっている。

baseUrl非推奨による副作用なぜtsconfig-pathが必要？ tscはpathsの@/components/*のようなパスエイリアスをコンパイル時の型チェックにしか使わない出力されるJSはエイリアスのまま... 実行時にモジュール解決をするのにtsconfig-pathが必要

baseUrl非推奨による副作用 ts-nodeからtsxに移行 tsxはtsconfigの解析にget-tsconfigを使うので、baseUrlがなくても動く tsxはesbuildeでTypeScriptをトランスパイルをして、実行時に型チェックをしないためts-nodeと比較して高速 🏃

moduleResolutionをbundlerに変えた影響元々moudleResolutionにはnode10を使っていた node10はpackage.jsonのexportsフィールド非対応古いライブラリにはサブパスにtypesフィールドがなかった node10では検知できなかったが、bundlerに変えてからエラーとして検知できるようになった 🙆🏻‍♀️ ライブラリのバージョンアップによって解決

jsのlintでOOMが発生 ※これはTypeScriptのバージョンアップは関係ない話 8000ファイルのimport/orderが全て落ちていた eslint-import-resolver-typescriptがなくなっていた...

jsのlintでOOMが発生 eslint-import-resolver-typescriptはpackage.jsonに明記されておらず、 eslint-config-nextに依存していたので動いていた(幽霊依存) lock.jsonの再生成のタイミングでeslint-import-resolver-typescriptの依存が消えてしまったのが原因 installをしてpackage.jsonに追加したら解決 💯

jsのlintでOOMが発生 import/no-extraneous-dependenciesでpackage.jsonにないimportを検知できるが、あくまで対象はソースコード内 knipはESlintの設定ファイルから使用するプラグインがpackage.jsonに存在するかまで検知してくれる ✂️ pnpmならこのような幽霊依存は防げる

chapter 3 v6 → v7

v6と並列で実行今回のバージョンアップはCLIとしてのtscしか提供されていない TypeScript Compiler APIはまだ提供されていない Compiler APIに依存するtypescript-eslintはv7のままでは動かない... v6の互換性を担保した@typescript/typescript6が提供されている tscのみv7で実行できる

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で型チェックをする ②[email protected]のuseTypeScriptCliを使う安定版を待つのが良さそう... 🤔

おしまい

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

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

satojin219

Other Decks in Technology

Featured

Transcript