KZhead

TypeScript in React - COMPLETE Tutorial (Crash Course)

ByteGrad
2024 ж. 2 Мам.
172 751 Рет қаралды
Жүктеу

Hi, I'm Wesley. I'm a brand ambassador for Kinde. I'll help you master the latest tech here:
👉 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

Пікірлер

  • Just discovered this guy. Amazing. Doesn't waste time. Doesn't try to be funny. No nonsense clear, solid info.

    @alan-oq4vk@alan-oq4vkАй бұрын

  • So far the best «Everything you need to know » for Typescript with React ! ❤

    @endlessia@endlessia8 ай бұрын

    • Glad you think so!

      @ByteGrad@ByteGrad8 ай бұрын

    • I think the same too , the best video for typescript I've seen

      @ardianhotii@ardianhotii8 ай бұрын

    • Insanely good.

      @__mas@__mas7 ай бұрын

    • Seriously the best typescript video I needed

      @adamrodriguez7598@adamrodriguez75984 ай бұрын

    • I was actually looking the for useReducer, useMemo, and useCallback when I saw the title "COMPLETE"..

      @wishmeheaven@wishmeheaven4 ай бұрын

  • 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.

    @VincentJenks@VincentJenks7 ай бұрын

    • 100% agree, love that it is straight to the point, and examples are great and very clear.

      @anastasiiazh.9107@anastasiiazh.91077 ай бұрын

    • 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@jou38836 ай бұрын

    • ​@@jou3883😂

      @khaleelalhaji@khaleelalhaji5 ай бұрын

    • Shouldn't the title "Complete" arrive with (at least) useReducer..?

      @wishmeheaven@wishmeheaven4 ай бұрын

    • I agree. Straight to the point. Excellent presentation and explanation as well.

      @MarkEdwardTan@MarkEdwardTan2 ай бұрын

  • Glad I found your channel.

    @faizanahmed9304@faizanahmed93048 ай бұрын

  • 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!

    @shadyheadstash@shadyheadstash8 ай бұрын

  • Wish I have found this video earlier. Simply the best.

    @josantana6259@josantana62597 ай бұрын

  • Whatever you teach goes straight to my mind's knowledge base, without me needing to organize the information. Thank you so much!

    @armangohari6193@armangohari6193Ай бұрын

  • I'm really GRAD i've found your channel. So much useful knowledge and I really like the way you explain.

    @klaudiuszbiegacz3519@klaudiuszbiegacz35198 ай бұрын

    • Good one.😄

      @lukas.webdev@lukas.webdev8 ай бұрын

  • 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.

    @gurpritsingh3164@gurpritsingh31647 ай бұрын

  • The best react with typescript video I've ever seen.

    @jsinnerx@jsinnerx8 ай бұрын

    • Have you find those which called themselves "COMPLETE" as this one, But also include useReducer, useCallback and useMemo..? 👀

      @wishmeheaven@wishmeheaven4 ай бұрын

  • These latest videos of yours are overpowered

    @Cypekeh@Cypekeh8 ай бұрын

  • no BS, this is clean and integral handbook for react-ts dev, keep it up!

    @dickson710@dickson7108 ай бұрын

    • Appreciate it!

      @ByteGrad@ByteGrad8 ай бұрын

  • Really appreciate you sharing Typescript fundamentals in such an easy to follow way ! This will now serve as my typescript refresher.

    @hell2force@hell2force7 ай бұрын

  • I had to learn all these the hard way on the job. I'm glad you are helping developers out with this stuff... Kudos!

    @femmyemmy691@femmyemmy6918 ай бұрын

  • 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!

    @HenryBabbage@HenryBabbage8 ай бұрын

  • 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!

    @kuldarkalvik0@kuldarkalvik08 ай бұрын

  • 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

    @quanghungpham269@quanghungpham2694 ай бұрын

  • You upload what I really need right now

    @minamulhaq@minamulhaq8 ай бұрын

  • i appreciate the roadmap, where you started, continued and ended is just awesome, easy to learn and easy to remember. thanks alot.

    @alirezagarshasbi6557@alirezagarshasbi65577 ай бұрын

  • Love your method of teaching, straight to the point and concise. Subscribed.

    @mangoherpson@mangoherpson7 ай бұрын

  • 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

    @sedmidivka@sedmidivka4 ай бұрын

  • Best Typescript course so far. I've learned alot thanks a ton brother. :)

    @brancode404@brancode4043 ай бұрын

  • Definitely the best explanation that can easily be digested I got for Typescript generics.

    @nchatu@nchatu7 ай бұрын

  • Great in details and very easy to understand, Thanks a lot man ❤

    @sukhjindersingh7802@sukhjindersingh78027 ай бұрын

  • 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.

    @treyrader@treyrader6 ай бұрын

  • This is just awesome! You've managed to explain most of the Typescript in React in just 1-hout video!

    @AlexBereza@AlexBereza7 ай бұрын

  • Amazing quick explanations! I've watched the video in one breath. Thanks!!

    @julias3782@julias37827 ай бұрын

  • Super clear explanations of Generics, thanks a lot man!

    @aliplaysgtr@aliplaysgtr7 ай бұрын

  • This is top-shelf educational content. Simple and easy to reference I have learned a lot. Thank you

    @safariambience4052@safariambience40528 ай бұрын

    • Great to hear, thanks

      @ByteGrad@ByteGrad8 ай бұрын

  • This is awesome! Thanks so much for the video and especially the timestamps.

    @maxstrootmann@maxstrootmann4 ай бұрын

  • 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 ❤

    @RajakumaranChakaravarthy@RajakumaranChakaravarthy2 ай бұрын

  • 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. 🙌

    @davesmith7658@davesmith76584 ай бұрын

  • That was very helpful I was looking for it to make things clearer!

    @male3399@male33998 ай бұрын

  • Crazy amount of value in this mini course, Thanks a lot 🙏

    @supafast1314@supafast13144 ай бұрын

  • oh my god, thank you. this video is awesome, an hour of pure gold.

    @zaxpeedy2852@zaxpeedy2852Ай бұрын

  • 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 ?

    @throwaway-lo4zw@throwaway-lo4zw3 ай бұрын

    • 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.....

      @srii_entertainment@srii_entertainment3 ай бұрын

    • meow

      @internet_18.0@internet_18.04 күн бұрын

  • Great video! Thanks for sharing! 😉🔥

    @lukas.webdev@lukas.webdev8 ай бұрын

    • Thanks for watching!

      @ByteGrad@ByteGrad8 ай бұрын

  • Concise and helpful. Love it.😊

    @hurleywflow2227@hurleywflow22278 ай бұрын

  • 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

    @yananderson5864@yananderson58646 ай бұрын

  • Just amazing! Thanks for sharing.

    @OvercomerIdemudia@OvercomerIdemudia17 күн бұрын

  • This is exactly what I was looking for! Thank you very much 👏🏻

    @landrit.@landrit.7 ай бұрын

  • God bless you, man, thank you for the lesson👍👍👍

    @bashkort_erete@bashkort_erete21 күн бұрын

  • Awesome tutorial . Your channel deserves more subscribers. Just keep uploading videos. We are enjoying your content.

    @santoshparker8681@santoshparker86814 ай бұрын

  • Very informative video - clearly and concisely explaining all the major aspects someone needs in TS

    @Silverdagger258@Silverdagger2588 ай бұрын

  • 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.

    @gosnooky@gosnooky8 ай бұрын

  • great teaching bro. very helpful for as a react js developer trying to learn react typescript.

    @meew7571@meew7571Ай бұрын

  • this is so complete ! thank you

    @pooyadehghan17@pooyadehghan1722 күн бұрын

  • This video is amazing. Really appreciate it

    @Hhammer@Hhammer8 ай бұрын

  • Wesley, thank you. This tutorial is amazing! I understand more from this video than from udemy TS course

    @daria_vyshniakova@daria_vyshniakovaАй бұрын

  • His voice is so peaceful

    @webdev_telugu@webdev_telugu8 ай бұрын

  • Fabulous, just found the channel recently and helping me allot. Hopeing for more tips and tricks for reactTs.

    @saiphaneeshk.h.5482@saiphaneeshk.h.54828 ай бұрын

  • 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!

    @dxabraham198@dxabraham1987 ай бұрын

  • very lovely and described TS in react. Gr8 Thanks

    @gmjitendra@gmjitendraАй бұрын

  • My brother, All my questions, you have answered I know, you know your stuff Great Job! 😄

    @enriquegrageda@enriquegrageda3 ай бұрын

  • 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+ KZhead 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.

    @sudarshan_savvy@sudarshan_savvy6 ай бұрын

  • Such a thorough video. Thank you! This has so much that I didn't know before!

    @developerpranav@developerpranav8 ай бұрын

    • Glad it was helpful!

      @ByteGrad@ByteGrad8 ай бұрын

  • Thank you so much for this amazing course❤

    @Yesterday_i_ate_rat@Yesterday_i_ate_rat3 ай бұрын

  • 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!!

    @olusanyaolamide9764@olusanyaolamide97648 ай бұрын

  • Fantastic refresher plus tricks.

    @iqwebserve3973@iqwebserve39734 ай бұрын

  • Very quick but very helpful for experienced backend developers whom looking for get into TypeScript quickly ... thanks a lot (Y)

    @aboaya2012@aboaya20125 ай бұрын

  • Thank you for an amazing tutorial

    @rifleking6189@rifleking61897 ай бұрын

  • This is best! You are extremely professional, experienced and also teach noob. Amzing.

    @naimurhasanrwd@naimurhasanrwd7 ай бұрын

  • To the point nice explanation man ❤

    @khizer3528@khizer35288 ай бұрын

  • Great Job , I enjoy every single section and explication in this video. Thanks so much!!! Keep Going new follower here

    @michaeldiaz7919@michaeldiaz79197 ай бұрын

  • That's great, thank you ❤ Finally I understand

    @max_masterius@max_masteriusАй бұрын

  • 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.

    @ivanyoed@ivanyoed3 ай бұрын

  • Thank you so much for this video. I learned a lot.

    @mohhamadtoosi8128@mohhamadtoosi81287 ай бұрын

  • I learn about TS in this video more than spending a whole year by myself lmao , really good content as always!

    @rujinopy7746@rujinopy77465 ай бұрын

  • Great typescript tutoriol, thank you so much

    @rekikmarwa5216@rekikmarwa52166 ай бұрын

  • Very valuable. I start to think you are just at the top of the JS/Typescript/React game in KZhead.

    @Raphael-jo1rp@Raphael-jo1rp7 ай бұрын

  • 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. ❣👏

    @deni930918@deni9309182 ай бұрын

  • I like that you are opinionated and use the cleanest looking formats , keep up the good work

    @ts8960@ts8960Ай бұрын

  • excellent videos bro!!!! keep it up!!!

    @kireetjoshi3711@kireetjoshi37113 ай бұрын

  • Amazing, such an amazing content you’re putting on internet. I wish you a lot of success, ❤️

    @heysahilsingh@heysahilsingh8 ай бұрын

  • Great tutorial !

    @tahamanna3600@tahamanna36007 ай бұрын

  • Thank you for the informative and helpful tutorial

    @thanhninh2863@thanhninh28632 ай бұрын

  • You are giving bangers again again please tell us the release date of your course.

    @prashlovessamosa@prashlovessamosa8 ай бұрын

    • Just finishing the details. Make sure you're subscribed to the email newsletter :)

      @ByteGrad@ByteGrad8 ай бұрын

    • Hi, how much is the price of the course?@@ByteGrad

      @Edgar-pu1lc@Edgar-pu1lc8 ай бұрын

    • Haven’t decided yet. Email subscribers get a discount on launch though

      @ByteGrad@ByteGrad8 ай бұрын

    • ​@@ByteGradmake s professional course on react and backend on KZhead... plz...as many students, don't have money to buy courses from Udemy etc

      @Imam.Mehdi_@Imam.Mehdi_8 ай бұрын

    • @@ByteGrad thanks already subscribed.

      @prashlovessamosa@prashlovessamosa8 ай бұрын

  • Thank you for this! I really hope you publish more React + TypeScript content as there isn't enough of it on KZhead which teaches both together.

    @ryanwoods3333@ryanwoods33337 ай бұрын

    • 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

      @olusanyaolamide9764@olusanyaolamide97647 ай бұрын

  • Now that's what I call content! Awesome job!

    @ashrafsir69@ashrafsir698 ай бұрын

  • Hey man! Great video! I hope that you'd share other great video like this🎉🎉

    @j7coder@j7coder7 ай бұрын

  • Thank you ByteGrad!

    @shivagurung4161@shivagurung41614 ай бұрын

  • Amazing video!

    @the_yugandharr@the_yugandharr7 ай бұрын

  • learn a lot from this vedio..Thank you sir❤

    @user-sq5ef1nr6r@user-sq5ef1nr6r4 ай бұрын

  • Awesome video, thanks

    @dantervil6103@dantervil61037 ай бұрын

  • U r the best. I love your style.

    @Coding-su3zj@Coding-su3zjАй бұрын

  • great tutorial, thank you !!

    @romaind4853@romaind48535 ай бұрын

  • Great video again!

    @salikjamal3536@salikjamal35367 ай бұрын

  • Thank you for your job!)) I have never get such good quality info in Russian or any other languages!

    @katerynamordovtseva1191@katerynamordovtseva11913 ай бұрын

  • It is almost one hour duration video. But I don't know why i felt that only 15 mins passed when the video finishes. Really this is a best typescript course 🔥

    @legend_749@legend_7497 ай бұрын

  • 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

    @shrishkerur7571@shrishkerur75718 ай бұрын

    • Do you really need redux nowadays?. ContextAPI abstracts a lot

      @mikerobin8410@mikerobin84108 ай бұрын

  • I appreciate your work ❤

    @adembenabdallah9678@adembenabdallah96788 ай бұрын

  • Thanks for video 👍

    @bakhtiyor_sulaymonov@bakhtiyor_sulaymonov7 ай бұрын

  • Very amazing content sir! straight to the point, clear and literally everything I need to know

    @ej-d@ej-d7 ай бұрын

    • india, stop using "sir" this makes you look like you are brainless parrots repeating this "sir" word

      @27sosite73@27sosite737 ай бұрын

  • I enjoyed your videos! Do you have any plans to create a tutorial on building an inventory management system using Next.js? Your tutorials are fantastic, and I'd love to see one on this topic! I also want to include as well as utilize free APIs for data integration.

    @Yahya_Umar@Yahya_Umar6 ай бұрын

  • Thank you so much 🎉❤

    @programmingwithnit5308@programmingwithnit53087 ай бұрын

  • This is GOLD! Thank you! Are you doing a full typescript course by chance with real-world implementation?

    @HeyNoah@HeyNoah8 ай бұрын

    • Thanks, my next course is about React & Next.js. There’s a lot of TypeScript in there. Make sure you’re subscribed to the email newsletter :)

      @ByteGrad@ByteGrad8 ай бұрын

    • @@ByteGrad Done!! Love you're videos dude! You have a real great way of making things digestible and understandable for people who are advanced, but want to be. Super appreciate it! 🙏

      @HeyNoah@HeyNoah8 ай бұрын

  • Thank you! I've learned a lot :) you pay attention only importanat things and that is great, also speed you looks like Documentation on TV

    @azamataliqulov1601@azamataliqulov16018 ай бұрын

  • thanks a lot! very nice video

    @olegsirbu2@olegsirbu25 ай бұрын

  • thanks, I learn a lot!

    @hoyinleunghk@hoyinleunghk5 ай бұрын

  • finding myself liking every video i watch from you, so i can go back to them later for reference.

    @alvinacosta2312@alvinacosta23127 ай бұрын
KZhead