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.4k
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
Swift Concurrency - 状態監視の罠
objectiveaudio
2
420
Build your own WebP codec in Swift
kishikawakatsumi
2
870
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
200
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
310
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.2k
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
140
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
660
AccessorySetupKitで実現するシームレスなペアリング体験 / Seamless pairing with AccessorySetupKit
nekowen
0
210
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
プログラマのための作曲入門
cheebow
0
510
パフォーマンスチューニングで Web 技術を深掘り直す
progfay
18
4.8k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Invisible Side of Design
smashingmag
301
51k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Faster Mobile Websites
deanohume
310
31k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Building Applications with DynamoDB
mza
96
6.6k
Code Review Best Practice
trishagee
72
19k
Producing Creativity
orderedlist
PRO
347
40k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Scaling GitHub
holman
463
140k
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 は割と使えるので頭の片隅に置いてお くといいかも •
技術の掛け合わせで解決できる課題もあるので、引き出し を広げていこう