How to use generics in TypeScript

Official Generics Docs: www.typescriptlang.org/docs/h...
shaky.sh

[@andrew-burgess]

👋there are more great ways to use generics, so I wrote about them here: shaky.sh/ts-generic-utils/

[@DemPilafian]

One of the key things that made this tutorial awesome is the excellent *"job queue"* example. Using a simple but realistic example is a million times more helpful than using the typical meaningless placeholders of *"foo", "bar", "test1", "test2",* and *"asdf".*

[@rolikaseventysix]

I've discovered your channel a few days ago and started to watch all your videos. You're are amazing buddy! State of the art content and the way you explain everything to the detail is unbeatable! The length of your videos also fits me a lot. Thank you and keep doing the good stuff!

[@JuicyBenji]

Why have I watched like 10 videos on the subject of Generics but only now understanding it. You did a very good job explaining this, THANKS !

[@monty_2969]

Had read the official docs numerous times and had watched several vids regarding generics in TS. But couldn't develop a firm mental model about the same like your vid helped me develop. Amazing explanation man ! 👌

[@JosimarBezerra-fx8wb]

For ages I've been coming across tutorials and articles on this topic but this video is exactly what I've been looking for. I can finally say that now I totally got my head around how generics work in TypeScript. Thank you Andrew for making this incredibly helpful video. You've definitely gotten my subscription. Keep up with the great content.

[@rampage_sl]

Your channel is such a gem

[@TimothySmithDev]

Excellent video, as always

[@BrandonKBoswell]

KZbin is acting bizarrely. It says this video has 30K views, but has 45K likes. That’s a great ratio. Keep up the great work! Also the video was great. Thank you!

[@Dgiulian]

One of the best explanations of Generics I've ever seen 👏

[@Oxfist]

This was a well explained video with good pacing and editing. Subscribed!

[@ErShikharChauhan]

best explanation for generics ever

[@mmmike3426]

Hype, I'm sure this is gonna be a masterclass!!

[@mmmike3426]

Nice example!! I usually see generics being used in mostly contrived ways, but the extends here was a really neat way to show the potential - I think this even helped give the factory pattern a bit more context for me!

[@rahimco-su3sc]

thanks a lot for this , it helps me understand generics in a deep way

[@TheDanthelion]

Great practical example, really helped clear things up

[@zeeebooo86]

Fantastic explanation! Bravo man

[@georgiosmylonas3892]

Super helpful! Thanks a lot for this!

[@nicio1393]

Andrew, good seeing you again. Took few of your class at Net Tuts Plus, Great teacher

[@ninthsun]

I often find generic pretty hard to implement in my code base, but I just got an idea how I can do it now. Thanks!

[@RayanMADAO]

Amazing thanks for helping me understand generics. I have a more intuitive feel for them now.

[@HSBTechYT]

This was helpful to form a Nice mental modal

[@dawid_dahl]

Subscribed! Thank you.

[@Cypekeh]

I like the word "job" now

[@superdev4024]

great content. thanks

[@TricoliciSerghei]

Very nice explanation, thank you very much! ;)

[@domoknows3275]

great example!

[@Libertoso]

Thank you very much

[@SonAyoD]

Great video!

[@balaganesh3440]

Your the the best!

[@Viva-07]

Thank you..nice video

[@mohamadabdelrida2866]

The thumbnail is pretty clever

[@kirillvoloshin2065]

template type analogy is great! I would love if TS renamed generics to template types of something

[@KarimFayed-oy5oo]

Great video! The one thing I don't understand is why is there a need for the angle brackets before the parenthesis of a function?

[@anatholekaringanire7649]

Nice tip

[@jaemochoco]

Thumbnail got me

[@codecifra]

Dude you’re good at explaining things. Keep it up! 💯 Glad I discovered your channel. Btw, will you make a video on types vs interfaces? Or do you have a short explanation on when to use one over the other? Thank you!

[@andrew-burgess]

I’m working on that video right now :) should be out some time in the next few weeks.

[@jonatanramhoj]

Great, clear explanation. I fully understand why it's called a "generic" in this example, since it can contain basically any value. But I still don't fully grasp why its called a generic when we annotate the useState in React like so for example: useState(false); This seems very specific (either an object with a specific set of props or a boolean as fallback), still this is called a "generic". Not understanding why...

[@fedordostoevskiy4209]

If you have any questions... 😂😂😂. I do have!!! Thanks. 👍

[@andrew-burgess]

Love questions! Ask ‘em here!

[@dechobarca]

Hey, I have a question, but it's actually not related to the topic main of this video exactly. I noticed you are using this // ^? comment at the bottom, which seems rather useful. Can you say exactly what it's called exactly? I tried searching for it online but couldn't find anything. Is it a typescript specific thing, or perhaps it's just a typescript playground feature? If it's documented somewhere, a link to that would be golden, cheers!

[@andrew-burgess]

Yeah! I think I first saw it in a Matt Pocock video, but it’s called a twoslash query: www.typescriptlang.org/play?#handbook-15 (Edit: KZbin doesn’t seem to like the hash sign in that link, so maybe copy and paste it instead of clicking?)

[@dechobarca]

@@andrew-burgess Thanks for the link, copy-pasting worked as intended so highly appreciated :) The reason I asked is because I thought it can be useful having something like that in VSCode, and sure enough it appears there is an extension with the same name available so I am probably going to give it a try. So thanks again, and keep up the great work. Your channel and content are amazing, definitely one of the best ones about Typescript along with Matt. EDIT: Also, just a small tip/idea/feedback, you could leave a TS playground links with the finished and/or starting version of the code you show on the screen in the description of your videos. Perhaps that could be useful for people who want to follow along but don't want to re-create the whole example from scratch. But up to you of course, cheers.

[@johnsailor3590]

I'd rather to use more readable names on the generics.. it does not hurt having a code that is easy to read.

[@Luxcium]

GEN.... I have a suggestion for a video... what is TNext in this TypeScript «interface Generator»

[@Luxcium]

I thought my question was so unrelated until I realized that it is indeed...

[@andyl.5998]

10:13 The naming of "intersection" in TS confuses me a bit. Normally, one would expect the operation of "intersection" to yield something smaller, by extracting the common part of multiple sets. "Intersection" in TS seems to function as "union" of properties. Although union is already taken in TS to mean the union of types, the naming of "intersection" still confuses me. 😅

[@Oxfist]

Exactly! I would just change the mental model to mean AND/OR in the boolean sense.

[@andrew-burgess]

lol, you're so spot-on. I've had the same conversation in my head multiple times. But the intersection is smaller, and only what is common; the union is broader, just like you'd expect. type toys = "ball" | "bat" | "shovel" | "bucket"; type events = "ball" | "gala" | "soiree" | "benefit" type OnlyBall = toys & events; type AllItems = toys | events; Dunno if this makes it more or less confusing ... let me know if this would be a good video topic!

[@andyl.5998]

@@andrew-burgess Yeah, OnlyBall and AllItems make total sense. The incongruence exists only in cases such as Job & {...} at 10:13.

[@andrew-burgess]

One mental model that's helped me with this is that even though the type itself _seems_ broader (since there are more fields), the set of values that match that type is a much smaller set, because it now has to match more fields. For example: type HasName = { name: string }; type HasAge = { age: number }; type HasNameAndAge = HasName & HasAge; type HasNameOrAge = HasName | HasAge; const a = { name: "Andrew" }; const b = { age: 100 }; const c = { name: "Andy", age: 200 }; // HasName: a, c // HasAge: b, c // HasNameAndAge: c // HasNameOrAge: a, b, c The types `HasName` and `HasAge` will be matched by two objects. HasNameOrAge is a union, and therefore matches a broader set of shapes: all 3 shapes. HasNameAndAge is an intersection, and so matches a narrower set of only 1 shape. I learned a lot of this from this blog post: ivov.dev/notes/typescript-and-set-theory

[@andyl.5998]

@@andrew-burgess Wow! Just wow! Your explanation is pure gold, Andrew. Thank you so much. My mind is blown.

[@GreggBolinger]

Why create `Job` as a type instead of an interface?

[@bolt6572]

immediately subscribed plus he's cute

[@AlexJohnSuarez]

You look like spiderman

[@jessejoseph2643]

This guy has just complicated the whole concept of generics. Anyone who really wants to wrap their head around generics should go over to web dev simplified kzbin.info/www/bejne/e5SmhXx7rdiko6s. You are welcome.

[@ricko13]

too much information... gotta re-watch it tho

[@hari9321]

This is one of the simplest and easy to understand tutorial about generics. Thanks @andrew-burgess