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
Ktorで簡単AIアプリケーション
tsukakei
0
100
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
640
Introduce Hono CLI
yusukebe
6
3.1k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
280
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
190
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
14k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
CSC305 Lecture 10
javiergs
PRO
0
230
理論と実務のギャップを超える
eycjur
0
180
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Mobile First: as difficult as doing things right
swwweet
225
10k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The World Runs on Bad Software
bkeepers
PRO
72
11k
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 は割と使えるので頭の片隅に置いてお くといいかも •
技術の掛け合わせで解決できる課題もあるので、引き出し を広げていこう