Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Advanced TypeScript for React

Glenn Reyes
April 04, 2024
Technology
0
30

Advanced TypeScript for React

Participants in this workshop will deep dive into the patterns of typing React Components and explore strategies for maintaining type-safe and scalable code. We will cover a wide range of topics, from Compound & Polymorphic Components to Discriminated Union Props, Generic Components, and much more.

Glenn Reyes

April 04, 2024
Tweet

More Decks by Glenn Reyes

See All by Glenn Reyes
TypeScript Patterns for Better React Components
glennreyes
1
360
GraphQL for React Developers
glennreyes
0
80
When things go wrong, get errors right!
glennreyes
0
67
GraphQL for JS developers
glennreyes
1
88
Building Dapps with React
glennreyes
0
50
Third-Party or Custom Code? The Art of Software Decisions
glennreyes
0
21
UI/UX challenges of Web3 and Dapps
glennreyes
0
100
Secrets of building robust UI components
glennreyes
0
300
Building modern React applications
glennreyes
0
160

Other Decks in Technology

See All in Technology
第1回 国土交通省 データコンペ参加者向け勉強会③ - Snowflake x estie編 -
estie
0
120
Lambdaと地方とコミュニティ
miu_crescent
2
370
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
490
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
110
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
300
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
130
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
410
Can We Measure Developer Productivity?
ewolff
1
150
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
470
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
210

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Bash Introduction
62gerente
608
210k
GitHub's CSS Performance
jonrohan
1030
460k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Building Applications with DynamoDB
mza
90
6.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Thoughts on Productivity
jonyablonski
67
4.3k
Making Projects Easy
brettharned
115
5.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k

Transcript

  1. @glnnrys · glennreyes.com Advanced TypeScript for React Workshop at CityJS

    London 2024 – April 4, 2024

  2. Glenn Reyes @glnnrys · glennreyes.com Engineer, Speaker & Teacher Engineer

    @ Spearbit

  3. @glnnrys Advanced TypeScript for React

  4. @glnnrys Advanced TypeScript

  5. @glnnrys React

  6. @glnnrys TypeScript 🤝 React

  7. @glnnrys Overview • Warm-up — HTML A tt ribute Types

    • Session 1 — Discriminated Union Types • Session 2 — Compound & Polymorphic Components • 10-min Break • Session 3 — Generic Components • Session 4 — Typing Components wrapped in forwardRef • Session 5 — Miscellaneous TypeScript Tips for React

  8. @glnnrys Links • CodeSandbox: • h tt ps://codesandbox.io/p/github/glennreyes/ advanced-typescript-workshop/main •

    Repository • h tt ps://github.com/glennreyes/advanced- typescript-workshop

  9. @glnnrys Miscellaneous TypeScript Tips for React

  10. @glnnrys https://glennreyes.com/talks/typescript-patterns-for-better-react-components

  11. @glnnrys type vs. interfaces

  12. @glnnrys & vs. interface extends

  13. @glnnrys More Resources

  14. @glnnrys https://react-typescript-cheatsheet.netlify.app/

  15. @glnnrys https://www.totaltypescript.com/articles