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
250
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.6k
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
AkarengaLT vol.38
hashimoto_kei
1
120
Software Architecture
hschwentner
6
2.3k
Google Opalで使える37のライブラリ
mickey_kubo
3
140
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
260
チームの境界をブチ抜いていけ
tokai235
0
220
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
280
iOSでSVG画像を扱う
kishikawakatsumi
0
160
ALL CODE BASE ARE BELONG TO STUDY
uzulla
27
6.7k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
What's new in Spring Modulith?
olivergierke
1
170
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
210
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
YesSQL, Process and Tooling at Scale
rocio
173
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Unsuck your backbone
ammeep
671
58k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Building Adaptive Systems
keathley
44
2.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
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 は割と使えるので頭の片隅に置いてお くといいかも •
技術の掛け合わせで解決できる課題もあるので、引き出し を広げていこう