TypeScript Generics are EASY once you know this

Поделиться
HTML-код
  • Опубликовано: 6 июн 2024
  • 👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
    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
    @jotasenator 8 месяцев назад +85

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

    • @patfre
      @patfre 8 месяцев назад +17

      And now employers are gonna avoid you for a reason

    • @jotasenator
      @jotasenator 8 месяцев назад +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 8 месяцев назад +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 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 месяцев назад +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...

  • @ashishboora3049
    @ashishboora3049 6 месяцев назад +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.

  • @timlind3129
    @timlind3129 8 месяцев назад +80

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

    • @ByteGrad
      @ByteGrad  8 месяцев назад +2

      Thanks, will do!

    • @user-ie7md3mm6x
      @user-ie7md3mm6x 8 месяцев назад

      agree 100%

    • @mblackritter
      @mblackritter 4 месяца назад

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

  • @xReDxTuRtLeZx
    @xReDxTuRtLeZx 8 месяцев назад +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

  • @tomisadone1145
    @tomisadone1145 6 месяцев назад +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

  • @MrBrandenS
    @MrBrandenS 8 месяцев назад +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.

  • @fluntimes
    @fluntimes 5 месяцев назад +1

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

  • @bcb3548
    @bcb3548 3 месяца назад +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!

  • @xi_red4936
    @xi_red4936 8 месяцев назад +2

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

  • @IrfanIdris
    @IrfanIdris 8 месяцев назад +6

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

  • @RegisZaleman
    @RegisZaleman 6 месяцев назад +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!

  • @uvaishassan
    @uvaishassan 8 месяцев назад +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 8 месяцев назад +1

      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!

  • @Harduex
    @Harduex 8 месяцев назад +1

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

  • @raheelafzal5406
    @raheelafzal5406 8 месяцев назад +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 6 месяцев назад +2

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

  • @tblancog
    @tblancog 8 месяцев назад +1

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

  • @ryanwoods3333
    @ryanwoods3333 8 месяцев назад +1

    really enjoy the typescript/react content thank you!

  • @HeyNoah
    @HeyNoah 8 месяцев назад +1

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

  • @grottogg4758
    @grottogg4758 8 месяцев назад +2

    Thanks for all your hard work, extremely helpful teacher!

  • @lil10dot
    @lil10dot 6 месяцев назад +1

    the way you explain is so clean and concise

  • @grzegorzpaprzycki2547
    @grzegorzpaprzycki2547 8 месяцев назад +1

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

  • @user-ie7md3mm6x
    @user-ie7md3mm6x 8 месяцев назад +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  8 месяцев назад

      Great to hear! :)

    • @user-ie7md3mm6x
      @user-ie7md3mm6x 8 месяцев назад +1

      @@ByteGrad great explanation, keep up the good work

  • @ALI-se4ph
    @ALI-se4ph 8 месяцев назад +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

  • @fisayowatti7208
    @fisayowatti7208 8 месяцев назад +6

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

  • @mohamed_mahran
    @mohamed_mahran 6 месяцев назад +1

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

  • @ByteGrad
    @ByteGrad  8 месяцев назад +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.

  • @matan1147
    @matan1147 8 месяцев назад +1

    Great video!
    loved your explanations 🔥

  • @PaulnJenna
    @PaulnJenna 5 месяцев назад +1

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

  • @saiphaneeshk.h.5482
    @saiphaneeshk.h.5482 8 месяцев назад +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.

  • @sofianesaid226
    @sofianesaid226 Месяц назад +1

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

  • @user-zd1dt7tz1u
    @user-zd1dt7tz1u 6 месяцев назад +1

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

  • @sakarsr
    @sakarsr 8 месяцев назад +1

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

  • @nurlanshukurov3864
    @nurlanshukurov3864 8 месяцев назад +1

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

  • @pastuh
    @pastuh 8 месяцев назад +2

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

  • @shivanshpatel4072
    @shivanshpatel4072 6 месяцев назад +1

    Awesome video you make this concepts really easy to understand ❤

  • @adhy612000151
    @adhy612000151 27 дней назад +1

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

  • @gregplittjunior8313
    @gregplittjunior8313 6 месяцев назад +1

    Kind of clear explanation, bravo 👏

  • @ethaneth6481
    @ethaneth6481 6 месяцев назад

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

  • @mkaufmandev
    @mkaufmandev 2 месяца назад +1

    Excellent tutorial packed with valuable information and reasoning.

  • @heitorpaulo5403
    @heitorpaulo5403 8 месяцев назад +1

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

  • @maor44
    @maor44 7 месяцев назад +1

    Amazing video dude! really helpful!

  • @tszhong0411
    @tszhong0411 8 месяцев назад +1

    You are the best! Keep it up ❤

  • @pixyoutube538
    @pixyoutube538 8 месяцев назад +1

    Great! Your video is very easy to understand

  • @serhiityshchenko4006
    @serhiityshchenko4006 8 месяцев назад +1

    Great video. Thanks!

  • @mervinmarias9283
    @mervinmarias9283 8 месяцев назад +1

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

  • @huykyoby1059
    @huykyoby1059 8 месяцев назад

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

  • @sarowarhosen003
    @sarowarhosen003 7 месяцев назад +1

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

  • @Ahmed-fq3kz
    @Ahmed-fq3kz 5 месяцев назад +1

    Wow, very clear and to the point

  • @Redyf
    @Redyf 3 месяца назад +1

    Your videos are REALLY helpful, thank you so much

  • @stratuspei9405
    @stratuspei9405 25 дней назад

    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.

  • @miksica
    @miksica 6 месяцев назад +1

    Pure gold, and thank you!

  • @SimPwear84
    @SimPwear84 7 месяцев назад

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

  • @cypherop2608
    @cypherop2608 5 месяцев назад +1

    best explanation on generics so far

  • @mr.javascript1320
    @mr.javascript1320 8 месяцев назад +1

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

    • @ByteGrad
      @ByteGrad  8 месяцев назад

      Glad you liked it!

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

  • @prashlovessamosa
    @prashlovessamosa 8 месяцев назад +1

    Thanks for sharing.

  • @demimontalto
    @demimontalto 8 месяцев назад +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  8 месяцев назад +2

      Yep, just to codify that relationship between the 2 props

  • @fiskryeziu
    @fiskryeziu 8 месяцев назад +1

    Thank you for the video learned a lot

  • @petleveler8366
    @petleveler8366 Месяц назад +1

    So much value here!

  • @123tomani
    @123tomani 7 месяцев назад +1

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

  • @pasanflo
    @pasanflo 6 месяцев назад +1

    Good example, thanks!

  • @alexandrupintilei5657
    @alexandrupintilei5657 6 месяцев назад +1

    Awesome video! Thanks!

  • @scott98390
    @scott98390 8 месяцев назад +1

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

  • @iwmatt
    @iwmatt 8 месяцев назад +1

  • @schintus
    @schintus 8 месяцев назад +1

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

  • @attilagyen1446
    @attilagyen1446 8 месяцев назад

    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.

  • @md.asifal-mahmud5952
    @md.asifal-mahmud5952 8 месяцев назад +1

    Awesome, Thanks a lot.

  • @minademian
    @minademian 6 месяцев назад +1

    Great video. Thank you.

  • @mohammedramadan740
    @mohammedramadan740 8 месяцев назад +1

    Great!

  • @ludwigvillalba1886
    @ludwigvillalba1886 7 месяцев назад +1

    Well explained!

  • @alenakavyrshyna3916
    @alenakavyrshyna3916 4 месяца назад

    The best video about generics ❤ thanks

  • @nathpaiva
    @nathpaiva 7 месяцев назад +1

    Generic is so cool. Nice video!

  • @amirhossein.banaei
    @amirhossein.banaei 4 месяца назад +1

    great explanation. thanks a lot .

  • @shashanktiwari8511
    @shashanktiwari8511 Месяц назад +1

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

  • @GooseGumlizzard
    @GooseGumlizzard 2 месяца назад +1

    this is great, thank you

  • @K.Huynh.
    @K.Huynh. 6 месяцев назад +1

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

  • @derrickcheung919
    @derrickcheung919 5 месяцев назад

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

  • @ChiragGoyal777
    @ChiragGoyal777 8 месяцев назад +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

  • @__mac
    @__mac 8 месяцев назад +1

    This helped alot!

  • @meal_team_six
    @meal_team_six 3 месяца назад +1

    Very helpful!

  • @dominikrodler8010
    @dominikrodler8010 2 месяца назад +1

    Excellent presentation

  • @markmuthii
    @markmuthii 8 месяцев назад +1

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

  • @youneshenni5417
    @youneshenni5417 8 месяцев назад +1

    great one!

  • @mikkun_
    @mikkun_ 8 месяцев назад +1

    In just 22 minutes, I've learned a lot

  • @Assassin29
    @Assassin29 8 месяцев назад +1

    very easy and cool explanation

  • @sergio.808s
    @sergio.808s 6 месяцев назад +1

    thank you!

  • @Salah-YT
    @Salah-YT 8 месяцев назад +2

    thank you so much

  • @danielmdenton
    @danielmdenton 7 месяцев назад +1

    This video earned a subscription.

  • @user-jx4xh1fr7x
    @user-jx4xh1fr7x 8 месяцев назад +1

    its good for me thanks!

  • @anonanon7368
    @anonanon7368 8 месяцев назад +1

    You're a beast man

  • @shreyas0924
    @shreyas0924 8 месяцев назад +1

    Greate video!!

  • @Landersaki_
    @Landersaki_ 8 месяцев назад

    what theme you use?

  • @kaushlendrashukla8350
    @kaushlendrashukla8350 2 месяца назад +1

    Well explained

  • @junsgk
    @junsgk 8 месяцев назад +2

    Best best ts teacher on youtube

  • @SR-zi1pw
    @SR-zi1pw 8 месяцев назад +1

    Really amazing

  • @wisdomelue
    @wisdomelue 8 месяцев назад +1

    great great content!

  • @fonshiynwatobi4675
    @fonshiynwatobi4675 7 месяцев назад

    This masterpiece is 10 years old

  • @cubedev4838
    @cubedev4838 5 месяцев назад +1

    I love how the way u explain

  • @SonAyoD
    @SonAyoD 5 месяцев назад

    what vscode theme do you use?

  • @lp26197
    @lp26197 8 месяцев назад

    Hello my friend, I am following you and I want advice from you. I am a front-end developer and I use next js and I have worked on actual projects and I want to start in the back-end field. You advise me to start with C# or Javascript framework and work. I am very confused. Please help me. From your point of view, what is best?