TypeScript in React - COMPLETE Tutorial (Crash Course)
HTML-код
- Опубликовано: 9 июн 2024
- 👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add auth to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 JSX to TSX
0:28 Typing variables
1:28 Typing functions
2:55 Typing React components
3:17 React.FC
3:52 Typing props
6:37 Extracting type
7:20 Benefits of TypeScript
7:44 Optional
8:14 Benefits of TypeScript (cont.)
8:35 'any' type
9:14 Type return value of component?
9:38 Union type
10:03 Extracting type
10:45 Typing arrays
11:32 Tuple type
12:21 React.CSSProperties
14:38 Record type
16:01 Typing functions
17:18 Typing children (React.ReactNode)
18:34 React.JSX.Element vs React.ReactNode
19:42 Typing useState setter function
21:01 Default prop values
21:35 Type Alias vs Interface
24:00 ComponentPropsWithoutRef
26:52 ...rest and ...spread
27:49 Intersection (&)
29:03 Interface extends
29:34 Typing event handler functions
31:13 Typing useState hook
34:33 Typing useRef hook
35:29 'as const'
36:55 Omit utility
37:38 'as' Type Assertion
38:31 Generics (EASY!)
42:00 Generics in React
45:10 index.d.ts vs types.ts
45:34 import type
47:05 'unknown' type
48:20 Zod
48:58 ts-reset library
49:28 Third-party types ('@types' / DefinitelyTyped)
50:33 tsconfig.json
52:09 next-env.d.ts
#webdevelopment #programming #coding
The only person who explained "Why you need to put a comma after T". That's a +10000
Just discovered this guy. Amazing. Doesn't waste time. Doesn't try to be funny. No nonsense clear, solid info.
This rapid fire and straightforward tutorial is exactly what I needed. I was trying to answer the question 'okay but how do I actually start using typescript?'
So far the best «Everything you need to know » for Typescript with React ! ❤
Glad you think so!
I think the same too , the best video for typescript I've seen
Insanely good.
Seriously the best typescript video I needed
I was actually looking the for useReducer, useMemo, and useCallback when I saw the title "COMPLETE"..
Your videos are excellent - amongst the best. You move quickly, waste zero time, and get right down to brass tacks. No fluff, lame banter, etc. I wish all course authors were as sharp and succinct! Well done, I like your style.
100% agree, love that it is straight to the point, and examples are great and very clear.
Agreed. and my next compliment has nothing to do with the content - I genuinely think he's good looking. Not flirting though, just stating the truth about his appearance. He looks clean, tidy and healthy. If only majority of devs could take care of their health more. And his skin is flawless and glowing! Not sure if he used any filter when recording this vid, but nevertheless, tell me your secret @ByteGrad !😅
@@jou3883😂
Shouldn't the title "Complete" arrive with (at least) useReducer..?
I agree. Straight to the point. Excellent presentation and explanation as well.
You're really nailing a great balance of introductory learning videos along with advanced topics. I find myself on your channel organically all the time and always find what need. Awesome work!
You are the best tutor; you know how to teach concepts very well. I have taken many paid courses and learned from more than 50+ RUclips tutors, no one matches your teaching style. Perfect pace, not slow, not fast, just 100% perfect. Clear concepts with practical examples. Thanks.
Your voice is relaxing but was bit low in this video.
ur voice, tone and pace makes ur tutorials way better to follow and understand than everyone else, am i the only 1 who thinks this ?
exactly. today I started watching a random video in this channel and I loved the way he speaks and immediately I subscribed to it and shared it to my friends.....
Whatever you teach goes straight to my mind's knowledge base, without me needing to organize the information. Thank you so much!
Been quite sick for the past few days and this calm to-the-point teaching approach is just the perfect way to pass time productivly. Keep up the good work!
what I like about your videos is that I feel like you know what you're talking about. I really don't like learning bad practices and many tutorials unfortunately teach those because nobody is perfect of course :D but I really like that it's doesn't sound like you are repeating something you've read yesterday but it is what you really know and understand and it isn't "just because" but it has a reason. thank you
it's sad that you can only like a video one time :(
Came across your channel today and this is the second video I have watched. I must say this is gold standard. Thank you for the hard work you have put in.
Love your super fast point to point teaching approach
i appreciate the roadmap, where you started, continued and ended is just awesome, easy to learn and easy to remember.
thanks alot.
I had to learn all these the hard way on the job. I'm glad you are helping developers out with this stuff... Kudos!
Love your method of teaching, straight to the point and concise. Subscribed.
Great Tutorial, your slower pace and soothing voice made it easier to understand most of these concepts. Too many tutors who just talk to quick and assume the learners pace is at expert level. 🙌
Really appreciate you sharing Typescript fundamentals in such an easy to follow way ! This will now serve as my typescript refresher.
By far best. Am going to suggest this video to every one in my team or ppl i know who are starting with Typescript. Thank you ❤
I learn about TS in this video more than spending a whole year by myself lmao , really good content as always!
Best explanation ever! 🔥 The best part is you just explained all the different scenarios with only one Button component. Need only this one video for typescript with React ! ❤
Amazing quick explanations! I've watched the video in one breath. Thanks!!
this was simply perfect! thanks a ton
the best typescript tutorial I've seen so far!
I like that you are opinionated and use the cleanest looking formats , keep up the good work
Epic video, it is rare to see so much info so clearly communicated. Totally enjoyable to watch and the perfect pace for getting started with Typescript. Thanks alot!
Thanks a lot my friend, there are tons of tutorials out there but there are also people who have the basics of JS and React already. Your videos are suitable for people like me, learning fast and simple
Super clear explanations of Generics, thanks a lot man!
no BS, this is clean and integral handbook for react-ts dev, keep it up!
Appreciate it!
Extremely well delivered content
I’ve had a problem with overall quality of content regarding development on youtube where you are not exactly learning but your way of teaching is really good and instead of just following along and having something that works your video allowed me to lewrn and make something of my own
Definitely the best explanation that can easily be digested I got for Typescript generics.
Best Typescript course so far. I've learned alot thanks a ton brother. :)
thanks man ❤❤ I have watched it completely and it's 100% recommended.
oh my god, thank you. this video is awesome, an hour of pure gold.
Wesley, thank you. This tutorial is amazing! I understand more from this video than from udemy TS course
Crazy amount of value in this mini course, Thanks a lot 🙏
So much knowledge compressed, thank you!
Nice thing about tuples, you can unionize them for different lengths. If you accept 4 numbers for padding for [top, right, bottom, left] or 2 values for just top and bottom ([x, y]), say, you could annotate tuple elements: padding: [x: number, y: number] | [left: number, right: number, bottom: number, left: number], then compute your padding based on the array length.
I've watched thousands of youtube channels and bro i love yours the best! Not sure if it's beginner friendly per se but for me it helps validate my understanding. ensures me that i am not entirely thinking about things wrong.
This is just awesome! You've managed to explain most of the Typescript in React in just 1-hout video!
Great in details and very easy to understand, Thanks a lot man ❤
This is awesome! Thanks so much for the video and especially the timestamps.
Wish I have found this video earlier. Simply the best.
The best react with typescript video I've ever seen.
Have you find those which called themselves "COMPLETE" as this one,
But also include useReducer, useCallback and useMemo..? 👀
this is so complete ! thank you
This is top-shelf educational content. Simple and easy to reference I have learned a lot. Thank you
Great to hear, thanks
I'm gonna get your courses right away. so straightforward. and you accent is so crisp and clear that it's hard not to fall in love with.. haha! and I am watching this after 8 months!
Awesome, enjoy!
My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.
your videos flow like water, very soothing, no fluff, straight to the most important details
Is this course for someone who is not a beginner and more like a strong junior?
@@klaudiuszbiegacz3519 Absolutely!
Thank you so much for this video. I recently started a job, and it requires typescript, and this helped me a lot, it's incredible
Awesome tutorial . Your channel deserves more subscribers. Just keep uploading videos. We are enjoying your content.
That was very helpful I was looking for it to make things clearer!
Such a thorough video. Thank you! This has so much that I didn't know before!
Glad it was helpful!
Thank you so much. This video is gold.
You upload what I really need right now
Very quick but very helpful for experienced backend developers whom looking for get into TypeScript quickly ... thanks a lot (Y)
Concise and helpful. Love it.😊
Fantastic refresher plus tricks.
Thank you for the valuable content in this video! I've been writing in TypeScript for quite a while, but I still learned a lot from watching it, and I recommend it to everyone.
It would be great to make tutorials for creating a Next.js application from scratch. ❣👏
I would of loved to watch this video 4 years ago when i was looking for a new job and i applied for one in which typescript was a nice-to-have requirement and when i joined the project it turned to be a whole react/node project written in TS. Everything you explain along the video i learned it struggling and pulling my hairs off of my head lol. Now i watched your video out of curiosity and i can say it's the best "Everything you need to know" video i've seen according to my experience. You really nailed it!
Very informative video - clearly and concisely explaining all the major aspects someone needs in TS
great teaching bro. very helpful for as a react js developer trying to learn react typescript.
My brother,
All my questions, you have answered
I know, you know your stuff
Great Job! 😄
very lovely and described TS in react. Gr8 Thanks
This is exactly what I was looking for!
Thank you very much 👏🏻
God bless you, man, thank you for the lesson👍👍👍
I'm really GRAD i've found your channel. So much useful knowledge and I really like the way you explain.
Good one.😄
Just amazing! Thanks for sharing.
Glad I found your channel.
Thank you for this!
I really hope you publish more React + TypeScript content as there isn't enough of it on RUclips which teaches both together.
Exactly 💯, it's good to see videos like this, JavaScript mastery released a video recently saying React isn't NextJs and he talked about server components and how we must change the way we think when using the new nextJs 13 app router, the new changes can be a bit overwhelming especially for newbies just transitioning from react to nextJs, I still use the old pages directly for my learning for now, I feel the app router to be confusing
Great typescript tutoriol, thank you so much
This is best! You are extremely professional, experienced and also teach noob. Amzing.
That's great, thank you ❤ Finally I understand
Very valuable. I start to think you are just at the top of the JS/Typescript/React game in RUclips.
Thank you so much for this amazing course❤
The first time I saw your video, it was react mistakes junior developers make, I'm so intrigued by the quality of the presentation and the way you speak it's unique, it helps me easily understand, You are good!! real good!!
Thanks a lot man. Will be watching a lot of your videos. They're very well made. Sometimes a bit fast for me, but I can always pause or play them slower. Anyways, thanks for the hard work.
These latest videos of yours are overpowered
Amazing video!
great tutorial, thank you !!
Thank you ByteGrad!
Thank you for an amazing tutorial
Fabulous, just found the channel recently and helping me allot.
Hopeing for more tips and tricks for reactTs.
default exports or named exports?
Thank you so much for this video.
I learned a lot.
thanks, I learn a lot!
Thank you for the informative and helpful tutorial
great tutorial, thank you! i know that wrinkles are bad but you could allow yourself make some facial expressions from time to time :)
Now that's what I call content! Awesome job!
Thank you for your job!)) I have never get such good quality info in Russian or any other languages!
learn a lot from this vedio..Thank you sir❤
Dude, your timing is perfect, and the way you teach is on another level. I never found anyone with Nextjs 13 and would be glad if you make one on Nextjs 13 with Redux
Do you really need redux nowadays?. ContextAPI abstracts a lot
finding myself liking every video i watch from you, so i can go back to them later for reference.
thanks a lot! very nice video
Amazing, such an amazing content you’re putting on internet.
I wish you a lot of success, ❤️
Very amazing content sir! straight to the point, clear and literally everything I need to know
india, stop using "sir"
this makes you look like you are brainless parrots repeating this "sir" word
Thank you so much, this is a great tutorial and very helpful.
What extension do you use for typescript?
U r the best. I love your style.
Dude u r no less than a James bond. In looks and delivering content
Not sure if it's intentional but your video has an ASMR effect. The most relaxing coding video I've seen.