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
220
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
450
JSConf jp 2021 kaonavi front-end development in the monolithic service
maminami373
1
210
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
maminami373
0
2.2k
Other Decks in Programming
See All in Programming
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
110
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
200
実践!App Intents対応
yuukiw00w
1
340
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
240
兎に角、コードレビュー
mitohato14
0
150
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
130
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
実践 Dev Containers × Claude Code
touyu
1
240
パスタの技術
yusukebe
1
400
tool ディレクティブを導入してみた感想
sgash708
1
150
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
12
2.8k
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
130
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
65k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
GitHub's CSS Performance
jonrohan
1031
460k
Designing for Performance
lara
610
69k
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 は割と使えるので頭の片隅に置いてお くといいかも •
技術の掛け合わせで解決できる課題もあるので、引き出し を広げていこう