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".*
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!
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 ! 👌
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.
UA-cam 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!
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!
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!
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!
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: UA-cam doesn’t seem to like the hash sign in that link, so maybe copy and paste it instead of clicking?)
@@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.
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. 😅
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!
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
Seeing “any” makes me very uncomfortable. Clearly this is a tutorial for beginners. So they should be discouraged as much as possible from using “any”.
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 ua-cam.com/video/EcCTIExsqmI/v-deo.html. You are welcome.
👋there are more great ways to use generics, so I wrote about them here: shaky.sh/ts-generic-utils/
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".*
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!
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 !
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 ! 👌
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.
UA-cam 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!
Your channel is such a gem
One of the best explanations of Generics I've ever seen 👏
Hype, I'm sure this is gonna be a masterclass!!
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!
Excellent video, as always
This was a well explained video with good pacing and editing. Subscribed!
best explanation for generics ever
template type analogy is great!
I would love if TS renamed generics to template types of something
Great practical example, really helped clear things up
best yt thumbnail in a long time lmao
Andrew, good seeing you again. Took few of your class at Net Tuts Plus, Great teacher
thanks a lot for this , it helps me understand generics in a deep way
Amazing thanks for helping me understand generics. I have a more intuitive feel for them now.
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!
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!
I’m working on that video right now :) should be out some time in the next few weeks.
The thumbnail is pretty clever
I like the word "job" now
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?
This was helpful to form a Nice mental modal
Super helpful! Thanks a lot for this!
Thank you very much
I'd rather to use more readable names on the generics.. it does not hurt having a code that is easy to read.
Fantastic explanation! Bravo man
GEN.... I have a suggestion for a video... what is TNext in this TypeScript «interface Generator»
I thought my question was so unrelated until I realized that it is indeed...
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!
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: UA-cam doesn’t seem to like the hash sign in that link, so maybe copy and paste it instead of clicking?)
@@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.
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. 😅
Exactly! I would just change the mental model to mean AND/OR in the boolean sense.
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!
@@andrew-burgess Yeah, OnlyBall and AllItems make total sense. The incongruence exists only in cases such as Job & {...} at 10:13.
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
@@andrew-burgess Wow! Just wow! Your explanation is pure gold, Andrew. Thank you so much. My mind is blown.
Thumbnail got me
Subscribed! Thank you.
great example!
great content. thanks
Very nice explanation, thank you very much! ;)
If you have any questions... 😂😂😂. I do have!!! Thanks. 👍
Love questions! Ask ‘em here!
Your the the best!
Thank you..nice video
Great video!
Why create `Job` as a type instead of an interface?
Not making the mental model still.. Video is very good at the start
Nice tip
immediately subscribed plus he's cute
You look like spiderman
Seeing “any” makes me very uncomfortable. Clearly this is a tutorial for beginners. So they should be discouraged as much as possible from using “any”.
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 ua-cam.com/video/EcCTIExsqmI/v-deo.html. You are welcome.
too much information... gotta re-watch it tho
This is one of the simplest and easy to understand tutorial about generics. Thanks @andrew-burgess