Transcript from the "Generics & Template Literals" Lesson
>> Yeah, I think it is worth spending a few minutes to talk like we've like hand waved around these generics. And if you look at like how [INAUDIBLE] Works that like T and like extend string number of symbol, those are generics. And we've been around and we've definitely like directly addressed them.
[00:00:19] So let's spend a minute or two or five or ten. Just talk a little bit about what they are and how they work. Cuz like, we're gonna have to do some like magic with them in a heartbeat in order to kind of like solve that context issue that we had before, right?
[00:00:42] So we should probably at least do our due diligence, right? Like it's a little deviating from reaction TypeScript to a little bit of type script. But, when we start using them to solve our context problem that I set up for us, we're gonna need them. So let's head over to the course website.
[00:00:57] We're gonna go to the section on generics. And I'm gonna open up the TypeScript Playground too, which is just tsplayground, And all this is is looks like Visual Studio Code, bigger fonts. And you can see that like I was clearly playing around like it saves your last thing I was playing around with template literals before, right?
[00:01:24] You can see this is very similar. So I have this user, got a first name and last name and an age. We saw this earlier when I was struggling with the colour conversion cuz the library's using. So I showed you already how I can do this. And that's super cool.
[00:01:41] But then we're gonna talk a little bit more generics in a second but like this is kind of one that I made for an action, right? Which is, it should take some kind of type, in this case user, right? And user has these three keys, right? So say, hey, we've got some type that I'm gonna hand you just like we did with partial and omit before.
[00:02:41] Which first name is, first name is a string absolutely. And it is one of these keys. All I am going to say is for the years that I've been using TypeScript, every time I saw one of these I wanted to cry. And then one day I had to do something really complicated and I just sat there I pumped one out and it worked the first time.
[00:03:04] I don't know when you cross the chasm. I don't know how it happens. I will just say this is a simple one, like we can look at some more advancements later, if this stresses you out that it's an okay feeling, there's no need to have impostor syndrome. And then one day, you will surprise us hopefully one day you will surprise yourself and just like busting out with [INAUDIBLE] And like conditionals and it will do exactly what you want.
[00:03:26] You will not know how you acquired this superpower. So, understand that this is a journey and don't feel stressed out like this is kind of why it's like a little bit of an aside. But the really cool thing is that it automatically looked at okay, cool. First name has to be a key on user.
[00:03:45] And then the payload automatically became a value on the user object,right? If I change this to, You can see that it automatically became a number,right? And this is great for reusability. We started before there is a trade off between should you get all fancy like this or like would making three actions by hand have been better.
[00:04:08] If you are the maintainer of like [INAUDIBLE] Redux and you're trying to make a CreateAction hook that generates the right type. This is where you live now. If you are the consumer of one of those libraries, like I will not do in this. I took one foray into the React types, And I don't know that I came back out the same person, right?
[00:04:32] Like you can do similar version of these, but this is kind of the and I put a lot of reading on like some really wild stuff about even some of the implementation details and some of the stuff, but I'm mostly only going to touch lightly on it because it doesn't fit the heuristic of have I used it in my own production codebase in the last six months to a year.
[00:05:57] Grab the key age and its value is a number for the payload and this is just using the template literals that we saw before.