TSConfig Solution Style & subpath imports to switch types on a per-file basis

Transcript

1. TSConfig Solution Style & subpath imports でファイル単位で型を切り替える TSKaigi 2025 | 株式会社Gaudiy kotori
2. 自己紹介 • kotori ( @maminami_minami) • 株式会社Gaudiy Enabling Team • Love: 酒・アニメ・声優 • 趣味: お絵描き
3. Solution Style • 複数の tsconfig を用意 • 適用する設定をファイル毎に切り替え • Vite の react-ts template でも採用
4. Subpath imports • import のパスを他のモジュールに 再マッピングする Node.js の機能 • package.json imports フィールド に定義 • # で始まる必要がある
5. 課題 Storybook でFragment Masking が 解除された Fragment Props を利用したい！ w/ GraphQL Fragment Colocation
6. Fragment Colocation -> 使うデータは近くに宣言！ Fragment Masking -> 宣言したデータだけ使えるように制限！
7. gql.tada • GraphQL を型安全に扱えるエコシステム • GraphQL Codegen と違い generate コマンドの実行なしで即時 に gql tag の変更を型推論可能に • TypeScript LSP Plugin として gql.tada/ts-plugin を tsconfig plugins フィールドに追加
8. 詳しくは Gaudiy Tech Blog にて！ https://techblog.gaudiy.com/entry/2024/08/15/113040
9. setup graphql w/ gql.tada
10. Storybook w/ Fragment
11. Storybook w/ Fragment gql.tada の maskFragments() でマスクして Props に渡さないと型エラー
12. Storybook w/ nested Fragment
13. Storybook w/ nested Fragment
14. Storybook w/ nested Fragment 😭 😇 重複したフィールド… 可読性…
15. Storybook w/ nested Fragment 理想
16. 解決方法💪
17. Subpath imports
18. Solution Style
19. Storybook w/ nested Fragment 理想 型エラーにならない！型推論が効く！🥰 .stories.tsx 以外では Fragment Masking が適用
20. まとめ
21. まとめ • gql.tada はいいゾ • Subpath imports は割と使えるので頭の片隅に置いてお くといいかも • 技術の掛け合わせで解決できる課題もあるので、引き出し を広げていこう