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
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
880
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
1.8k
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
140
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
740
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
770
TypeScriptでDXを上げろ! Hono編
yusukebe
4
920
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
710
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
910
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
AIのメモリー
watany
12
1.2k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Code Review Best Practice
trishagee
69
19k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Producing Creativity
orderedlist
PRO
346
40k
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 は割と使えるので頭の片隅に置いてお くといいかも •
技術の掛け合わせで解決できる課題もあるので、引き出し を広げていこう