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.7k
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
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
Developer Joy - The New Paradigm
hollycummins
1
370
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
920
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
マンガアプリViewerの大画面対応を考える
kk__777
0
390
品質ワークショップをやってみた
nealle
0
650
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
530
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.6k
オンデバイスAIとXcode
ryodeveloper
0
260
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
950
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
130
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
880
Featured
See All Featured
Facilitating Awesome Meetings
lara
57
6.6k
Designing for Performance
lara
610
69k
What's in a price? How to price your products and services
michaelherold
246
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Pragmatic Product Professional
lauravandoore
36
7k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
130
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
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 は割と使えるので頭の片隅に置いてお くといいかも •
技術の掛け合わせで解決できる課題もあるので、引き出し を広げていこう