Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TSConfig Solution Style & subpath imports to sw...
Search
South
May 22, 2025
Programming
1
200
TSConfig Solution Style & subpath imports to switch types on a per-file basis
South
May 22, 2025
Tweet
Share
More Decks by South
See All by South
JSConf JP 2022 introduce React Query
maminami373
2
7.1k
Front-end rearchitect SPA
maminami373
0
440
JSConf jp 2021 kaonavi front-end development in the monolithic service
maminami373
1
210
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
maminami373
0
2.1k
Other Decks in Programming
See All in Programming
Agent Rules as Domain Parser
yodakeisuke
1
470
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
10
1.6k
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
520
XSLTで作るBrainfuck処理系
makki_d
0
160
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
250
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
3
310
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
450
Step up the performance game with Spring Boot and Project Leyden
mhalbritter
0
170
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
2.5k
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.7k
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
130
プロダクト改善のために新しいことを始める -useContextからの卒業、Zustandへ-
rebase_engineering
1
110
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
GraphQLとの向き合い方2022年版
quramy
46
14k
We Have a Design System, Now What?
morganepeng
52
7.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Music & Morning Musume
bryan
46
6.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.4k
Adopting Sorbet at Scale
ufuk
77
9.4k
Transcript
TSConfig Solution Style & subpath imports でファイル単位で型を切り替える TSKaigi 2025 |
株式会社Gaudiy kotori
自己紹介 • kotori ( @maminami_minami) • 株式会社Gaudiy Enabling Team •
Love: 酒・アニメ・声優 • 趣味: お絵描き
Solution Style • 複数の tsconfig を用意 • 適用する設定をファイル毎に切り替え • Vite
の react-ts template でも採用
Subpath imports • import のパスを他のモジュールに 再マッピングする Node.js の機能 • package.json
imports フィールド に定義 • # で始まる必要がある
課題 Storybook でFragment Masking が 解除された Fragment Props を利用したい! w/
GraphQL Fragment Colocation
Fragment Colocation -> 使うデータは近くに宣言! Fragment Masking -> 宣言したデータだけ使えるように制限!
gql.tada • GraphQL を型安全に扱えるエコシステム • GraphQL Codegen と違い generate コマンドの実行なしで即時
に gql tag の変更を型推論可能に • TypeScript LSP Plugin として gql.tada/ts-plugin を tsconfig plugins フィールドに追加
詳しくは Gaudiy Tech Blog にて! https://techblog.gaudiy.com/entry/2024/08/15/113040
setup graphql w/ gql.tada
Storybook w/ Fragment
Storybook w/ Fragment gql.tada の maskFragments() でマスクして Props に渡さないと型エラー
Storybook w/ nested Fragment
Storybook w/ nested Fragment
Storybook w/ nested Fragment 😭 😇 重複したフィールド… 可読性…
Storybook w/ nested Fragment 理想
解決方法💪
Subpath imports
Solution Style
Storybook w/ nested Fragment 理想 型エラーにならない!型推論が効く!🥰 .stories.tsx 以外では Fragment Masking
が適用
まとめ
まとめ • gql.tada はいいゾ • Subpath imports は割と使えるので頭の片隅に置いてお くといいかも •
技術の掛け合わせで解決できる課題もあるので、引き出し を広げていこう