はじめに
こんにちは！Frontendチームの薄羽です。TypeScript 6.0がリリースされました🎉内部向けに6.0に上げるまでの手順を書こうと思いましたが、せっかくなら詰まったところを全世界に共有した方が良いと思い、テックブログにします。エイプリルフールに執筆していたので、タイトルを「TypeScript 6億」にしようと思いましたが、全然面白くなかったためやめました。あと、タイトルにもありますが上げられなかったです。
TypeScript 6.0とは
詳しくは公式ブログを参照してください！TypeScriptは7.0からGo言語での実装になります。6.0は7.0に移行するためにいくつかの設定がdeprecatedになっています。また、TypeScriptで書かれた最後のTypeScriptです。
手順
おそらく、多くの方が以下の手順をとっていると思います（我々もそうです）:
typescript-eslintをあげるtypescriptをあげる（tsconfig.jsonを修正）
typescript-eslint をあげる
以下のIssueで詰まりました😢
no-unnecessary-type-arguments のautofixによって、必要な型が削除されてしまい、tsc が通らなくなりました。この問題は 8.58.0 から発生しており、8.58.0 の peerDependencies が "typescript": ">=4.8.4 <6.1.0" になっており、このバージョンから6.0に対応しています。正直、TypeScriptのバージョンを上げてエラーが起きなければ typescript-eslint を上げなくても良いと思いましたが、急ぎではなかったため、このIssueの解決を待つことにしました。
tsconfig.json を修正
6.0から types のデフォルトが [] になっています。これを ["*"] とすると6.0未満と似た挙動になる（node_modules/@types が全列挙される）のですが、必要なものだけを列挙する方が型チェックのパフォーマンスは良くなります。importしているパッケージの @types は types に列挙する必要はないため、["node"] などを書けば良いです（import fs from "node:fs" のような node: プロトコルのimportがあれば @types/node を自動で解決してほしいとは思いました）。
もう1つ我々に関係した設定は noUncheckedSideEffectImports です。デフォルトが true に変更されています。false だと副作用のみのimport（e.g., import "@itandi/something"）はパッケージ名が誤っていてもエラーになりません。itandi-frontend の場合はBiomeで noUndeclaredDependencies が設定されているため、package.json にないパッケージ名は biome check で落ちます。ただ、./index.css のような相対パスでのimportは検知されません。誤ったimportはランタイムで検知できますが、tsc でチェックしたいと思い、デフォルトの true にしました。true にすると ./index.css でエラーになりました😇
最終的に "types": ["gtag.js", "vite/client"] を加えました。前者は window.gtag 用で、後者はStorybook（Vite）用です。
おわりに
アップデートで困っている人は参考にしてみてください！業務連絡ですが、typescript-eslint のIssueが解決されたらイタンジのエンジニアはこれを読んで6.0にしてください！
