TypeScript Generics are EASY once you know this

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication 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 Example 1
4:11 Example 2
6:58 Example 3 (multiple type parameters)
9:23 React example
13:31 Extracting type
15:25 State setter function
17:08 'extends'
18:54 Inference vs specifying yourself
#webdevelopment #programming #coding

Пікірлер: 187

  • @jotasenator
    @jotasenator8 ай бұрын

    I was avoiding generics for a while for no reason, now, finally I will avoid it with a reason

  • @patfre

    @patfre

    8 ай бұрын

    And now employers are gonna avoid you for a reason

  • @jotasenator

    @jotasenator

    8 ай бұрын

    @@patfre auch! was a funny way to say the content is great and well explained but still generics are hard and verbose no matter what. Will be healthy a pole to show how many devs use generics in his job. Also if an employer doesn't select you because you don't use a specific content, well, that is not the place.

  • @patfre

    @patfre

    8 ай бұрын

    @@jotasenator the whole point of generics is the make thing generic, they are very helpful in making things type safe especially with how much TS allows you to do, I just used it today to make my code simpler and cleaner and not be 100 lines of repeated code. Also the thing about companies is they want safe and reliable code that follows best practices a lot so they can absolutely deny you for something like this if your 100% not willing to follow their practices with the code

  • @slimbofat

    @slimbofat

    6 ай бұрын

    ​@@jotasenatormight as well just avoid typescript while you're at it. Generics are what allow effective code reuse and sound typing to coexist

  • @jotasenator

    @jotasenator

    6 ай бұрын

    @@slimbofat the thing is I do use typescript, but never generics, in react.js and vue.js and next.js. I was watching this video because all the contents in here are explained in a way I like, still, don t see generics in the feature for me. Not saying I am against them, just I didn't find myself in a position saying: well, is time for generics...

  • @timlind3129
    @timlind31298 ай бұрын

    Honestly - this is probably the best description / example I've seen yet! Keep it up!

  • @ByteGrad

    @ByteGrad

    8 ай бұрын

    Thanks, will do!

  • @user-ie7md3mm6x

    @user-ie7md3mm6x

    8 ай бұрын

    agree 100%

  • @mblackritter

    @mblackritter

    3 ай бұрын

    I've also to *SUPER AGREE* - it's like *finally* someone really explained how it works - instead of talking plain code! 😻 haha 😹💦

  • @ashishboora3049
    @ashishboora30496 ай бұрын

    I am react developer and never used typescript, just out of curiosity started watching it. Now i am suddenly feeling like i know complete Typescript. I mean how well you explained it, i can understand every second of this video. This is really some next level teaching skill.

  • @xReDxTuRtLeZx
    @xReDxTuRtLeZx8 ай бұрын

    thanks for the clarity. you are great at explaining concepts, your vids have objectively made me better at TS and feels great when i manage to remember parts of vids when i encounter scenarios on my projects

  • @tomisadone1145
    @tomisadone11456 ай бұрын

    Spectacular video, had it open in a side tab for a month and I can't regret more not watching it before. Clearest explanation I've seen in a while

  • @MrBrandenS
    @MrBrandenS8 ай бұрын

    Wow this video shed a ton of light on some of the confusing pieces around generics for me. The content was so well put together and with the real life example with usages in react itself it really drove the point home from your early examples of generic benefits and when ti use them. Amazing way to teach these concepts. Thanks! Subscribed.

  • @bcb3548
    @bcb35482 ай бұрын

    As someone who has been anxious even when seeing cryptic type notations, this lesson is almost like a therapy session. For me, adding just after writing the function name make sense than coming back to it after annotating arguments. It reads like "this function / class is meant to work with these types".. Thank you!

  • @fluntimes
    @fluntimes4 ай бұрын

    I agree, this is the best explanation of generics I've encountered. Makes them seem easy, so your video description is on point!

  • @IrfanIdris
    @IrfanIdris8 ай бұрын

    I never realised generics are that simple to explain. Simply great! 👍🏽

  • @HeyNoah
    @HeyNoah8 ай бұрын

    Awesome tutorial!! Super easy to follow! Thanks a mill!

  • @Harduex
    @Harduex7 ай бұрын

    Very clean and comprehensive tutorial, keep up the good work 🙌

  • @xi_red4936
    @xi_red49368 ай бұрын

    This is hands down the best explanation I've ever seen on type Generics. Thank you soo much!

  • @RegisZaleman
    @RegisZaleman6 ай бұрын

    Well done. It is one of the best explanations of generics I have heard. From super simple to using it in React. Really good. Got my sub!

  • @patriciogesualdi7472
    @patriciogesualdi74725 ай бұрын

    I really like the emphasis on the relationship aspect, great video!

  • @ryanwoods3333
    @ryanwoods33338 ай бұрын

    really enjoy the typescript/react content thank you!

  • @tblancog
    @tblancog8 ай бұрын

    I really liked the way you explain such a complex topic like this one, you got a new subscriber. Thanks!

  • @raheelafzal5406
    @raheelafzal54067 ай бұрын

    it was the best of the best explanation i have seen. did not understand the generics, but now it all making sense. HUGE THANKS BRO

  • @lil10dot
    @lil10dot6 ай бұрын

    the way you explain is so clean and concise

  • @grottogg4758
    @grottogg47588 ай бұрын

    Thanks for all your hard work, extremely helpful teacher!

  • @fisayowatti7208
    @fisayowatti72088 ай бұрын

    "Hopefully this helps you out a little bit with generics". No sir! This helped me out a ton!

  • @mohamed_mahran
    @mohamed_mahran5 ай бұрын

    Thank you mate! The video was on point. Finally I got a understanding in generics.

  • @uvaishassan
    @uvaishassan8 ай бұрын

    This is the best video on generics I have watched so far. Was really struggling with understanding generics but this helped a lot. Explaining in terms of relationship between arguments and return type was brilliant

  • @ardianhotii

    @ardianhotii

    8 ай бұрын

    I think the same too , best video for generics , again thank you so much @ByteGrag for these awesome videos

  • @ByteGrad

    @ByteGrad

    8 ай бұрын

    Great to hear!

  • @matan1147
    @matan11478 ай бұрын

    Great video! loved your explanations 🔥

  • @PaulnJenna
    @PaulnJenna5 ай бұрын

    Amazing! I was confused before watching this. Great explanation!!

  • @cypherop2608
    @cypherop26084 ай бұрын

    best explanation on generics so far

  • @Redyf
    @Redyf2 ай бұрын

    Your videos are REALLY helpful, thank you so much

  • @grzegorzpaprzycki2547
    @grzegorzpaprzycki25478 ай бұрын

    You explain hard topics very clearly. Keep going like that ❤

  • @maor44
    @maor447 ай бұрын

    Amazing video dude! really helpful!

  • @adhy612000151
    @adhy61200015117 күн бұрын

    Thanks For your explanation about Generic, Wesley!!!! Great tutorial!

  • @ALI-se4ph
    @ALI-se4ph8 ай бұрын

    your channel is great for junior devs who already know javascript and got job but they need more tricks and knowledge to become a better developer

  • @alexandrupintilei5657
    @alexandrupintilei56576 ай бұрын

    Awesome video! Thanks!

  • @sofianesaid226
    @sofianesaid226Ай бұрын

    easier than I thought now after watching your video, thank you very much!

  • @pasanflo
    @pasanflo6 ай бұрын

    Good example, thanks!

  • @shivanshpatel4072
    @shivanshpatel40725 ай бұрын

    Awesome video you make this concepts really easy to understand ❤

  • @mkaufmandev
    @mkaufmandev2 ай бұрын

    Excellent tutorial packed with valuable information and reasoning.

  • @user-ie7md3mm6x
    @user-ie7md3mm6x8 ай бұрын

    You totally nailed it! I've read docs couple times and yet still didn't get full understanding, but now... thank you man!

  • @ByteGrad

    @ByteGrad

    8 ай бұрын

    Great to hear! :)

  • @user-ie7md3mm6x

    @user-ie7md3mm6x

    8 ай бұрын

    @@ByteGrad great explanation, keep up the good work

  • @gregplittjunior8313
    @gregplittjunior83136 ай бұрын

    Kind of clear explanation, bravo 👏

  • @Ahmed-fq3kz
    @Ahmed-fq3kz4 ай бұрын

    Wow, very clear and to the point

  • @miksica
    @miksica5 ай бұрын

    Pure gold, and thank you!

  • @petleveler8366
    @petleveler836623 күн бұрын

    So much value here!

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

    Damn, it feels difficult but you can no where find these kind of basic knowledge which you'll only get from experience. Thanks allot.

  • @serhiityshchenko4006
    @serhiityshchenko40068 ай бұрын

    Great video. Thanks!

  • @pixyoutube538
    @pixyoutube5388 ай бұрын

    Great! Your video is very easy to understand

  • @user-zd1dt7tz1u
    @user-zd1dt7tz1u6 ай бұрын

    This was such a good explanation. I was always wary of generics, but no longer!

  • @nurlanshukurov3864
    @nurlanshukurov38647 ай бұрын

    This is the best Ts generics video I've seen so far. Please, make video about mapped types and keyof keyword also. 👑

  • @sakarsr
    @sakarsr8 ай бұрын

    Neat explanation of Typescript Generics. Thank you for your time, have good health and a nice day.

  • @minademian
    @minademian6 ай бұрын

    Great video. Thank you.

  • @amirhossein.banaei
    @amirhossein.banaei3 ай бұрын

    great explanation. thanks a lot .

  • @ludwigvillalba1886
    @ludwigvillalba18867 ай бұрын

    Well explained!

  • @SimPwear84
    @SimPwear847 ай бұрын

    Very cool video! I found your channel today and subbed for more content

  • @heitorpaulo5403
    @heitorpaulo54037 ай бұрын

    Wow! Finally...The relationship tip was the key to understand generics for me.

  • @ethaneth6481
    @ethaneth64816 ай бұрын

    In practice defining theme just as a string makes more sense, but I got your point, good tutorial

  • @dominikrodler8010
    @dominikrodler8010Ай бұрын

    Excellent presentation

  • @pastuh
    @pastuh8 ай бұрын

    If the React/Next.js course were explained like this, it would be amazing.

  • @tszhong0411
    @tszhong04118 ай бұрын

    You are the best! Keep it up ❤

  • @mr.javascript1320
    @mr.javascript13208 ай бұрын

    Amamzing explanation !!!! loved it !!!!

  • @ByteGrad

    @ByteGrad

    8 ай бұрын

    Glad you liked it!

  • @__mac
    @__mac8 ай бұрын

    This helped alot!

  • @md.asifal-mahmud5952
    @md.asifal-mahmud59527 ай бұрын

    Awesome, Thanks a lot.

  • @GooseGumlizzard
    @GooseGumlizzard2 ай бұрын

    this is great, thank you

  • @fiskryeziu
    @fiskryeziu8 ай бұрын

    Thank you for the video learned a lot

  • @stratuspei9405
    @stratuspei940515 күн бұрын

    Why is the type parameter ( "") after the function name or type name necessary? I'm guessing it's just for better performance of the TS compiler. It seems the input parameter type(s) (including the sequence in which they appear) and the output type are sufficient information to determine the relationships that need to be codified. I'm grateful for your video. The statement that "generics are specifications of codifying relationships between parameter and output types" is excellent and did make it easy to understand generics.

  • @meal_team_six
    @meal_team_six3 ай бұрын

    Very helpful!

  • @sarowarhosen003
    @sarowarhosen0037 ай бұрын

    . i had many confusion about ts Generics . this tutorial is very helpful for me thank you so much , , now i have clear understand

  • @alenakavyrshyna3916
    @alenakavyrshyna39164 ай бұрын

    The best video about generics ❤ thanks

  • @prashlovessamosa
    @prashlovessamosa8 ай бұрын

    Thanks for sharing.

  • @shashanktiwari8511
    @shashanktiwari8511Ай бұрын

    Excellent example, and i want to know what is this VS extension that is giving suggestions for auto code complete

  • @youneshenni5417
    @youneshenni54178 ай бұрын

    great one!

  • @nathpaiva
    @nathpaiva7 ай бұрын

    Generic is so cool. Nice video!

  • @prakharagarwal5929
    @prakharagarwal59298 ай бұрын

    very easy and cool explanation

  • @kaushlendrashukla8350
    @kaushlendrashukla83502 ай бұрын

    Well explained

  • @mervinmarias9283
    @mervinmarias92838 ай бұрын

    I don't even use TypeScript, but after this video I actually understand how to use generics.

  • @K.Huynh.
    @K.Huynh.5 ай бұрын

    thank for sharing! It's new for me! 🌈

  • @user-jx4xh1fr7x
    @user-jx4xh1fr7x8 ай бұрын

    its good for me thanks!

  • @Salah-YT
    @Salah-YT8 ай бұрын

    thank you so much

  • @cubedev4838
    @cubedev48385 ай бұрын

    I love how the way u explain

  • @123tomani
    @123tomani6 ай бұрын

    Very well explained 🎉 Can you also do a video on websockets and best way to implement in micro front end application

  • @sergio.808s
    @sergio.808s6 ай бұрын

    thank you!

  • @huykyoby1059
    @huykyoby10598 ай бұрын

    Thank you, Can I ask what extension you are using that it suggests when you code?

  • @wisdomelue
    @wisdomelue8 ай бұрын

    great great content!

  • @danielmdenton
    @danielmdenton7 ай бұрын

    This video earned a subscription.

  • @iwmatt
    @iwmatt8 ай бұрын

  • @SR-zi1pw
    @SR-zi1pw8 ай бұрын

    Really amazing

  • @junsgk
    @junsgk8 ай бұрын

    Best best ts teacher on youtube

  • @scott98390
    @scott983908 ай бұрын

    Is there a way to create extension methods on a Type without running into issues because you extended the .prototype?

  • @raymondmichael4987
    @raymondmichael49878 ай бұрын

    Thanks buddy 😊

  • @ByteGrad

    @ByteGrad

    8 ай бұрын

    No problem 👍

  • @shreyas0924
    @shreyas09248 ай бұрын

    Greate video!!

  • @isaiahdavis.com_
    @isaiahdavis.com_6 ай бұрын

    For the createArrayPair can you also use the reserve word argument if the function name itself is explicit enough and your parameters are not a specific data type?

  • @anonanon7368
    @anonanon73688 ай бұрын

    You're a beast man

  • @SonAyoD
    @SonAyoD5 ай бұрын

    great video

  • @ASTechEdu
    @ASTechEdu4 ай бұрын

    Nice video sir

  • @attilagyen1446
    @attilagyen14468 ай бұрын

    You can make it more clear when you leave out the { } and make the convertToArray as a one-liner. const convertToArray = (input: T) => [input];

  • @Ultrajuiced

    @Ultrajuiced

    8 ай бұрын

    Just remember that it won't get hoisted.

  • @doniaelfouly4142
    @doniaelfouly41424 ай бұрын

    thanks

  • @Lebannehn
    @LebannehnАй бұрын

    Good vid 👌

  • @anspangilinan
    @anspangilinan6 ай бұрын

    Superb

  • @schintus
    @schintus8 ай бұрын

    As a C# developer, this might be easier for me to understand up-front than pure JS devs :)

  • @mohammedramadan740
    @mohammedramadan7408 ай бұрын

    Great!

  • @mikkun_
    @mikkun_8 ай бұрын

    In just 22 minutes, I've learned a lot

  • @demimontalto
    @demimontalto8 ай бұрын

    Great! Just one question: what's the point of having a generic since you are extending it from something else (React.ReactNode in your example)? You do that just for relationships between params and return value or am I missing something? Thank you, keep it up!

  • @ByteGrad

    @ByteGrad

    8 ай бұрын

    Yep, just to codify that relationship between the 2 props

  • @derrickcheung919
    @derrickcheung9195 ай бұрын

    Generics isn't bad in other languages , but I found it quite daunting in typescript

  • @markmuthii
    @markmuthii8 ай бұрын

    First time here, and from this one video, I can tell I've landed on a goldmine.