TypeScript Generics are EASY once you know this

Sdílet
Vložit
  • čas přidán 19. 05. 2024
  • 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

Komentáře • 188

  • @jotasenator
    @jotasenator Před 8 měsíci +80

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

    • @patfre
      @patfre Před 8 měsíci +16

      And now employers are gonna avoid you for a reason

    • @jotasenator
      @jotasenator Před 8 měsíci +10

      @@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 Před 8 měsíci +2

      @@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 Před 6 měsíci

      ​@@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 Před 6 měsíci +1

      @@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
    @timlind3129 Před 8 měsíci +80

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

    • @ByteGrad
      @ByteGrad  Před 8 měsíci +2

      Thanks, will do!

    • @user-ie7md3mm6x
      @user-ie7md3mm6x Před 8 měsíci

      agree 100%

    • @mblackritter
      @mblackritter Před 3 měsíci

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

  • @ashishboora3049
    @ashishboora3049 Před 6 měsíci +15

    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
    @xReDxTuRtLeZx Před 8 měsíci +8

    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

  • @MrBrandenS
    @MrBrandenS Před 8 měsíci +11

    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.

  • @fisayowatti7208
    @fisayowatti7208 Před 8 měsíci +6

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

  • @tomisadone1145
    @tomisadone1145 Před 6 měsíci +6

    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

  • @xi_red4936
    @xi_red4936 Před 8 měsíci +2

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

  • @IrfanIdris
    @IrfanIdris Před 8 měsíci +6

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

  • @tblancog
    @tblancog Před 8 měsíci +1

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

  • @HeyNoah
    @HeyNoah Před 8 měsíci +1

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

  • @ryanwoods3333
    @ryanwoods3333 Před 8 měsíci +1

    really enjoy the typescript/react content thank you!

  • @fluntimes
    @fluntimes Před 4 měsíci +1

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

  • @grottogg4758
    @grottogg4758 Před 8 měsíci +2

    Thanks for all your hard work, extremely helpful teacher!

  • @uvaishassan
    @uvaishassan Před 8 měsíci +3

    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 Před 8 měsíci +1

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

    • @ByteGrad
      @ByteGrad  Před 8 měsíci

      Great to hear!

  • @grzegorzpaprzycki2547
    @grzegorzpaprzycki2547 Před 8 měsíci +1

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

  • @ALI-se4ph
    @ALI-se4ph Před 8 měsíci +1

    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

  • @RegisZaleman
    @RegisZaleman Před 6 měsíci +1

    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!

  • @matan1147
    @matan1147 Před 8 měsíci +1

    Great video!
    loved your explanations 🔥

  • @raheelafzal5406
    @raheelafzal5406 Před 7 měsíci +1

    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

  • @patriciogesualdi7472
    @patriciogesualdi7472 Před 5 měsíci +2

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

  • @user-ie7md3mm6x
    @user-ie7md3mm6x Před 8 měsíci +1

    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  Před 8 měsíci

      Great to hear! :)

    • @user-ie7md3mm6x
      @user-ie7md3mm6x Před 8 měsíci +1

      @@ByteGrad great explanation, keep up the good work

  • @lil10dot
    @lil10dot Před 6 měsíci +1

    the way you explain is so clean and concise

  • @bcb3548
    @bcb3548 Před 2 měsíci +1

    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!

  • @saiphaneeshk.h.5482
    @saiphaneeshk.h.5482 Před 8 měsíci +2

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

  • @Harduex
    @Harduex Před 7 měsíci +1

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

  • @nurlanshukurov3864
    @nurlanshukurov3864 Před 7 měsíci +1

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

  • @sakarsr
    @sakarsr Před 8 měsíci +1

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

  • @mohamed_mahran
    @mohamed_mahran Před 5 měsíci +1

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

  • @tszhong0411
    @tszhong0411 Před 8 měsíci +1

    You are the best! Keep it up ❤

  • @pixyoutube538
    @pixyoutube538 Před 8 měsíci +1

    Great! Your video is very easy to understand

  • @pastuh
    @pastuh Před 7 měsíci +2

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

  • @PaulnJenna
    @PaulnJenna Před 5 měsíci +1

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

  • @cypherop2608
    @cypherop2608 Před 4 měsíci +1

    best explanation on generics so far

  • @__mac
    @__mac Před 8 měsíci +1

    This helped alot!

  • @huykyoby1059
    @huykyoby1059 Před 8 měsíci

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

  • @heitorpaulo5403
    @heitorpaulo5403 Před 7 měsíci +1

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

  • @serhiityshchenko4006
    @serhiityshchenko4006 Před 8 měsíci +1

    Great video. Thanks!

  • @prakharagarwal5929
    @prakharagarwal5929 Před 7 měsíci +1

    very easy and cool explanation

  • @user-zd1dt7tz1u
    @user-zd1dt7tz1u Před 6 měsíci +1

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

  • @MarcosReis-ok4lv
    @MarcosReis-ok4lv Před 5 měsíci +1

    That is a great video, very well explained, thank you!

  • @sofianesaid226
    @sofianesaid226 Před měsícem +1

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

  • @mkaufmandev
    @mkaufmandev Před 2 měsíci +1

    Excellent tutorial packed with valuable information and reasoning.

  • @fiskryeziu
    @fiskryeziu Před 8 měsíci +1

    Thank you for the video learned a lot

  • @prashlovessamosa
    @prashlovessamosa Před 8 měsíci +1

    Thanks for sharing.

  • @mr.javascript1320
    @mr.javascript1320 Před 8 měsíci +1

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

  • @mervinmarias9283
    @mervinmarias9283 Před 7 měsíci +1

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

  • @scott98390
    @scott98390 Před 8 měsíci +1

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

  • @maor44
    @maor44 Před 6 měsíci +1

    Amazing video dude! really helpful!

  • @adhy612000151
    @adhy612000151 Před 9 dny +1

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

  • @shivanshpatel4072
    @shivanshpatel4072 Před 5 měsíci +1

    Awesome video you make this concepts really easy to understand ❤

  • @ethaneth6481
    @ethaneth6481 Před 5 měsíci

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

  • @sarowarhosen003
    @sarowarhosen003 Před 7 měsíci +1

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

  • @Redyf
    @Redyf Před 2 měsíci +1

    Your videos are REALLY helpful, thank you so much

  • @SR-zi1pw
    @SR-zi1pw Před 8 měsíci +1

    Really amazing

  • @miksica
    @miksica Před 5 měsíci +1

    Pure gold, and thank you!

  • @Ahmed-fq3kz
    @Ahmed-fq3kz Před 4 měsíci +1

    Wow, very clear and to the point

  • @SimPwear84
    @SimPwear84 Před 7 měsíci

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

  • @iwmatt
    @iwmatt Před 8 měsíci +1

  • @ByteGrad
    @ByteGrad  Před 8 měsíci +8

    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.

  • @wisdomelue
    @wisdomelue Před 8 měsíci +1

    great great content!

  • @pasanflo
    @pasanflo Před 6 měsíci +1

    Good example, thanks!

  • @junsgk
    @junsgk Před 8 měsíci +2

    Best best ts teacher on youtube

  • @gregplittjunior8313
    @gregplittjunior8313 Před 6 měsíci +1

    Kind of clear explanation, bravo 👏

  • @Salah-YT
    @Salah-YT Před 8 měsíci +2

    thank you so much

  • @user-jx4xh1fr7x
    @user-jx4xh1fr7x Před 8 měsíci +1

    its good for me thanks!

  • @youneshenni5417
    @youneshenni5417 Před 8 měsíci +1

    great one!

  • @demimontalto
    @demimontalto Před 8 měsíci +2

    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  Před 8 měsíci +2

      Yep, just to codify that relationship between the 2 props

  • @amirhossein.banaei
    @amirhossein.banaei Před 3 měsíci +1

    great explanation. thanks a lot .

  • @anonanon7368
    @anonanon7368 Před 8 měsíci +1

    You're a beast man

  • @alenakavyrshyna3916
    @alenakavyrshyna3916 Před 3 měsíci

    The best video about generics ❤ thanks

  • @mohammedramadan740
    @mohammedramadan740 Před 8 měsíci +1

    Great!

  • @alexandrupintilei5657
    @alexandrupintilei5657 Před 6 měsíci +1

    Awesome video! Thanks!

  • @ludwigvillalba1886
    @ludwigvillalba1886 Před 7 měsíci +1

    Well explained!

  • @petleveler8366
    @petleveler8366 Před 14 dny +1

    So much value here!

  • @shashanktiwari8511
    @shashanktiwari8511 Před měsícem +1

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

  • @ChiragGoyal777
    @ChiragGoyal777 Před 7 měsíci +2

    This is impressive, First time having a cool way to learn Generics. Keep it up! :)
    Please make a video on key of generics using

  • @Landersaki_
    @Landersaki_ Před 8 měsíci

    what theme you use?

  • @mikkun_
    @mikkun_ Před 8 měsíci +1

    In just 22 minutes, I've learned a lot

  • @laputafelix
    @laputafelix Před 8 měsíci +1

    Again, another extremely precise video to me

  • @GooseGumlizzard
    @GooseGumlizzard Před 2 měsíci +1

    this is great, thank you

  • @123tomani
    @123tomani Před 6 měsíci +1

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

  • @nathpaiva
    @nathpaiva Před 7 měsíci +1

    Generic is so cool. Nice video!

  • @minademian
    @minademian Před 6 měsíci +1

    Great video. Thank you.

  • @dominikrodler8010
    @dominikrodler8010 Před měsícem +1

    Excellent presentation

  • @antonarbus
    @antonarbus Před 7 měsíci +1

    Очень хорошо объяснил.

  • @shreyas0924
    @shreyas0924 Před 8 měsíci +1

    Greate video!!

  • @md.asifal-mahmud5952
    @md.asifal-mahmud5952 Před 7 měsíci +1

    Awesome, Thanks a lot.

  • @attilagyen1446
    @attilagyen1446 Před 8 měsíci

    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 Před 8 měsíci

      Just remember that it won't get hoisted.

  • @meal_team_six
    @meal_team_six Před 3 měsíci +1

    Very helpful!

  • @MrEnsiferum77
    @MrEnsiferum77 Před 7 měsíci

    How do I use generics in some generic component like Table, when I need the id property, for filter let's say... in that case Typescript complains that can't find the id on T type, so I must add intersect with & { id: string }, so I can help Typescript to infer the id type.

  • @raymondmichael4987
    @raymondmichael4987 Před 8 měsíci +1

    Thanks buddy 😊

  • @stratuspei9405
    @stratuspei9405 Před 7 dny

    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.

  • @K.Huynh.
    @K.Huynh. Před 5 měsíci +1

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

  • @isaiahdavis.com_
    @isaiahdavis.com_ Před 5 měsíci

    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?

  • @cubedev4838
    @cubedev4838 Před 5 měsíci +1

    I love how the way u explain

  • @markmuthii
    @markmuthii Před 7 měsíci +1

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

  • @danielmdenton
    @danielmdenton Před 7 měsíci +1

    This video earned a subscription.

  • @sergio.808s
    @sergio.808s Před 6 měsíci +1

    thank you!

  • @kaushlendrashukla8350
    @kaushlendrashukla8350 Před 2 měsíci +1

    Well explained