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

Advanced TypeScript for React

Avatar for Glenn Reyes Glenn Reyes
April 04, 2024
Technology
0
66

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.
Avatar for Glenn Reyes

Glenn Reyes

April 04, 2024
Tweet

More Decks by Glenn Reyes

See All by Glenn Reyes
TypeScript Patterns for Better React Components
Avatar for Glenn Reyes glennreyes
1
440
GraphQL for React Developers
Avatar for Glenn Reyes glennreyes
0
130
When things go wrong, get errors right!
Avatar for Glenn Reyes glennreyes
0
100
GraphQL for JS developers
Avatar for Glenn Reyes glennreyes
1
120
Building Dapps with React
Avatar for Glenn Reyes glennreyes
0
80
Third-Party or Custom Code? The Art of Software Decisions
Avatar for Glenn Reyes glennreyes
0
49
UI/UX challenges of Web3 and Dapps
Avatar for Glenn Reyes glennreyes
0
140
Secrets of building robust UI components
Avatar for Glenn Reyes glennreyes
0
350
Building modern React applications
Avatar for Glenn Reyes glennreyes
0
200

Other Decks in Technology

See All in Technology
S3 Tables を図解でやさしくおさらい～基本から QuickSight 連携まで/s3-tables-illustrated-basics-quicksight
Avatar for emi emiki
1
330
Zero Data Loss Autonomous Recovery Service サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
7.2k
大事なのは、AIの精度だけじゃない！〜1円のズレも許されない経理領域とAI〜
Avatar for Jun Nemoto jun_nemoto
11
5.2k
ローカル環境でAIを動かそう！
Avatar for Michael Tedder falken
PRO
1
170
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
3.2k
AIコードエディタは開発を変えるか？Cursorをチームに導入して1ヶ月経った本音
Avatar for Itaru Ota ota1022
1
700
令和最新版TypeScriptでのnpmパッケージ開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
110
オープンソースのハードウェアのコンテストに参加している話
Avatar for misoji engineer iotengineer22
0
530
AIとSREの未来 / AI and SRE
Avatar for ymotongpoo ymotongpoo
2
1.2k
libsyncrpcってなに？
Avatar for uhyo uhyo
0
140
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
740
面接を通過するためにやってて良かったこと3選
Avatar for SansanTech sansantech
PRO
0
130

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k
Done Done
Avatar for chrislema chrislema
184
16k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
70k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
329
24k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
188
11k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
49
8.1k
Designing for Performance
Avatar for Lara Hogan lara
608
69k

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