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
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
880
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.5k
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
620
Taming you application's environments
salaboy
0
190
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
180
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
190
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
誰も全体を知らない ～ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
230
Lexical Analysis
shigashiyama
1
150
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
190

Featured

See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Writing Fast Ruby
sferik
627
61k
Music & Morning Musume
bryan
46
6.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
A Tale of Four Properties
chriscoyier
156
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Six Lessons from altMBA
skipperchong
27
3.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Git: the NoSQL Database
bkeepers
PRO
427
64k

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