TSKaigi Hokuriku - tsc -initの設計思想の変化とその背景を追う

このスライドはTSKaigi Hokurikuの登壇に使用したスライドのアーカイブになります。

チームラボでは、フロントエンドエンジニアを募集しています。
少しでも、チームラボにご興味をお持ち頂けましたら、採用ページをご覧頂けますと幸いです。
https://www.team-lab.com/recruit/

TSKaigi Hokurikuは、TypeScriptの国内最大級技術カンファレンス「TSKaigi」の北陸地域版で、2025年11月に金沢で開催されたイベントです。
https://hokuriku.tskaigi.org/

Transcript

1. © teamLab Inc. tsc –-initの設計思想の変化と その背景を追う 大塚 竜太郎 チームラボ パッケージチーム 所属 - "教育的"アプローチから実用性重視への転換 -
2. © teamLab Inc. 所属｜ 2 自己紹介 2 チームラボ 大塚 竜太郎 Otsuka Ryutaro 寿司、加納蟹、能登牛、のどぐろ、寒ぶり🤤 パッケージチーム フロントエンド班
3. © teamLab Inc. TypeScript 5.9から tsc --init の内容が変わりました！ 3
4. © teamLab Inc. 4 リリースノートの一番上が「Minimal and Updated tsc –-init」🎉 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-9.html
5. © teamLab Inc. こう変わりました 5 wall of text minimal
6. © teamLab Inc. なぜ変わったのか？ 6
7. © teamLab Inc. tsc --init が変わった理由は主に3つ 7 1. 公式DocではESMを推進しているのに、肝心のtsc --initの生成結果が “module”: “commonjs”だったことにTypeScriptチームが衝撃を受けた！ 2. コメントが大量に書かれたwall of textなtsconfig.jsonが生成されるのは　 威圧的と外部からフィードバックがあった 3. 一般的に新しく生成されたtsconfig.jsonファイルの内容のほとんどを　　 すぐに削除していることがわかった
8. © teamLab Inc. どう変わったのか？ 8
9. © teamLab Inc. どう変わったのか？ 9 issueやオフラインミーティングでの議論があり、 最終的なTypeScriptチームの意図は58420#issuecomment-2848249941 に記載されています 以降では気になったものをピックアップして紹介します！
10. © teamLab Inc. 推奨: "types": [] でグローバル型を明示的に管理する 10 // Environment Settings // See also https://aka.ms/tsconfig/module "module": "nodenext", "target": "esnext", "types": [], // For nodejs: // "lib": ["esnext"], // "types": ["node"], // and npm install -D @types/node “types”: [] の主なメリット ▪ @types の自動読み込みを停止 ▪ 意図しないグローバル型の混入を防ぐ ▪ 型チェックの高速化 ▪ 不要な型定義を読み込まないため ▪ lib との競合防止 ▪ 例: lib: ["dom"] と @types/node の競合 など
11. © teamLab Inc. 推奨: 「後から有効化」が困難な"noUncheckedIndexedAccess"と"exactOptionalPropertyTypes" 運用方針として ▪ プロジェクトの後半で有効化するのは難しい ▪ 最初は「オン」で始めて好みで「オフ」に　 するのが良い 11 // Stricter Typechecking Options "noUncheckedIndexedAccess": true, "exactOptionalPropertyTypes": true,
12. © teamLab Inc. 推奨なし: Style Optionsはプロジェクト方針で決める TypeScriptチームの認識としては、 いくつかは有効化されるはず...ただし ▪ 「どれ」を選ぶかは好み次第 ▪ 逆に、すべてオンはコーディング中の ノイズになる 12 // Style Options // "noImplicitReturns": true, // "noImplicitOverride": true, // "noUnusedLocals": true, // "noUnusedParameters": true, // "noFallthroughCasesInSwitch": true, // "noPropertyAccessFromIndexSignature": true,
13. © teamLab Inc. 強く推奨: "verbatimModuleSyntax"と"isolatedModules" モダンなTS環境のベストプラクティス ▪ “verbatimModuleSyntax: true” ▪ import typeとimportを明確に区別する ▪ import/export を書いた通りに出力する ▪ “isolatedModules: true” ▪ 単一ファイルでトランスパイル可能か チェックする ▪ 他のトランスパイラでも安全にビルド できるコードを強制 13 // Recommended Options "strict": true, "jsx": "react-jsx", "verbatimModuleSyntax": true, "isolatedModules": true, "noUncheckedSideEffectImports": true, "moduleDetection": "force", "skipLibCheck": true,
14. © teamLab Inc. 推奨: "moduleDetection": "force" を明示する “moduleDetection”: "force" のメリット ▪ import/export がないファイルも常に　　 「モジュール」として扱うよう強制　　　　 （＝グローバルスコープの汚染を防ぐ） ポイント ▪ verbatimModuleSyntax: true を使うと、　 この設定は暗黙的に "force" になる ▪ ただし意図しない無効化を防ぐため、　　 明示的に設定することを推奨 14 // Recommended Options "strict": true, "jsx": "react-jsx", "verbatimModuleSyntax": true, "isolatedModules": true, "noUncheckedSideEffectImports": true, "moduleDetection": "force", "skipLibCheck": true,
15. © teamLab Inc. まとめ 15
16. © teamLab Inc. まとめ 16 以下のようなことがわかりました • “module”: “commonjs”が生成されていた衝撃と外部からのフィードバック、そしてエコシステムの 成熟からtsc --initを見直すに至った • TypeScriptチームが考えるベストプラクティスが盛り込まれている • 今後のtsconfigを考える上で参考になりそう！ 参考 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-9.html https://github.com/microsoft/TypeScript/issues/58417 https://github.com/microsoft/TypeScript/issues/58420 https://github.com/microsoft/TypeScript/issues/58420#issuecomment-2848249941 https://github.com/microsoft/TypeScript/pull/61813 Lookback TypeScript ESM support and what should we do now.
17. © teamlab Inc. 大塚 竜太郎 チームラボ パッケージチーム 所属 tsc –-initの設計思想の変化とその背景を追う - "教育的"アプローチから実用性重視への転換 - TSKaigi Hokuriku 2025 ご清聴ありがとうございました