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
240
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
Automating Web Accessibility Testing with AI Agents
maminami373
1
1.5k
JSConf JP 2022 introduce React Query
maminami373
2
7.2k
Front-end rearchitect SPA
maminami373
0
460
JSConf jp 2021 kaonavi front-end development in the monolithic service
maminami373
1
220
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
maminami373
0
2.2k
Other Decks in Programming
See All in Programming
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
490
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
180
Swift Concurrency - 状態監視の罠
objectiveaudio
2
460
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
880
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
330
CSC509 Lecture 03
javiergs
PRO
0
330
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
190
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
RailsConf 2023
tenderlove
30
1.2k
Agile that works and the tools we love
rasmusluckow
331
21k
Facilitating Awesome Meetings
lara
56
6.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
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 は割と使えるので頭の片隅に置いてお くといいかも •
技術の掛け合わせで解決できる課題もあるので、引き出し を広げていこう