I Wish I knew This About Typescript & React Sooner
37,791
Published 2024-02-04
🎉Our Newsletter is live! Join thousands of other developers
islemmaboud.com/join-newsletter
🐦 Follow me on Twitter: twitter.com/ipenywis
⭐ Timestamps ⭐
00:00 Intro
00:19 (01) Component Props
03:14 (02) Generic Components
08:31 (03) Type Narrowing
10:20 (04) Event Handlers
12:30 (05) Resources
Links mentioned in the video:
React Typescript cheatsheet: react-typescript-cheatsheet.netlify.app/
utility-types: github.com/piotrwitek/utility-types
ts-toolbelt: github.com/millsp/ts-toolbelt
Utilities: github.com/typescript-cheatsheets/utilities
-- Special Links
✨ Join Figma for Free and start designing now!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-cb44ct
-- Special Links
✨ Join Figma for Free and start designing now!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-cb44ct
-- Watch More Videos
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register API Server w/ Au...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React Code | From pr...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor Website in 1 hour...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React Login/Register ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like a Pro | Master ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro w/ Redux, Types...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like a Pro | Master ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQL with Apollo a...
🐦 Follow me on Twitter: twitter.com/ipenywis
💻 Github Profile: github.com/ipenywis
Made with
All Comments (21)
-
The generic component example was good but I find using compound components a much pleasant approach, you don't have to worry about passing types and the components end up being completely modular because you can pass whatever you want.
-
5:38 I'm pretty sure you don't have to pass the type to the carousel. So the <Carousel<Slide> ... /> it can be <Carousel items={items} renderItem={(item) => <div>{item.id}</div} /> item will still be infered correctly here from the type you're passing in the items and renderItem will still have that type set correctly.
-
Thanks bro, the first example opened the door to my new world.
-
great video. I think I will often come back to this video.
-
Wow what an explanation along with easy examples. After watching this video, I am thinking like I know nothing. But now I will not make those mistakes again. Thanks for this awesome video.
-
Very informative video ❤
-
this is very nice, thank you
-
You rock it. Thnx
-
thank you bro
-
Hi CoderOne~ Great video! Would you mind share what app you used in the video to do the fancy drawing?
-
Render props are only adding indirection in your carousel examples. You really only need to force render props if you need access within the component to those props and there's usually a better design pattern available. In this case you could have just rendered children and had the carousel dictate the container, and its styles, within the carousel.
-
Thanks for the great content, I have a question about the last event type one. I can't see the difference of have the type beside the event or after the function name. Can you let me know what is the benefits to have the type after the function name?
-
Hi @CoderOne, I really love your content. One off topic: could you maybe share your theme and font setup? I really like the style of your IDE. That'd be awesome!
-
Thanks brother! I want to ask what is the name of theme you are using here? and what's the extension you used to get a pen to highlight under code snippets?
-
Instead of a generic component, you can have a component which interface accepts a generic thus you can pass that generic to the underlying props, a bit better syntax IMO
-
do we still need to add React.FC for component??i was removed it all from my previous project.
-
how is the extension for vscode called which hides the tailwind code in editor? looks really clean - need this. thanks
-
const Component: FC
-
How do you do it with "type" INSTEAD of interface?
-
If you want to follow the SOLID principle, I feel like the 3rd example violate the OCP of SOLID
