Generics & Template Literals

[00:00:00]
>> 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:03]
And then we're gonna say, also we're gonna have another value. Now there's single letters cuz that's the convention. Could you call this, Like you wouldn't a JavaScript verb you totally could. So we've got, the tag that we're passing in. And then this one's a little trickier, right? Which we're saying we got this other one called K, which stands for key, which needs to be one of the keys of T, which is the user that I passed in, and also a string.

[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:04:50]
There was a question in the chat why did it work for age let's bring this all back as a number and we said it but if it's a string type age, the key itself is a string, right? The value because it's almost the same syntax as regular like accessing a value of an object in JavaScript, right, which is we're saying go grab this key.

[00:05:14]
It's very much like in JavaScript if we said const, Right, in this case, the key is a string. The value is a number, so it's why age still works. The key age is definitely a string. It's a number that's a value, and this is getting go into the type user.

[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.