Generic Type Systems

[00:00:00]
>> Let's start with a slightly simpler example and one of the ways to show you how this has been helping you under the hood, right? Are you all familiar with the data structure link list? Yeah, it's a collection, right? One node points to the other one. Like an array, you have the entire array.

[00:00:18]
If you need to like work through it, you totally can, but if you need to put one in the middle, you've got to basically in C at least create a brand-new array, like put it in, it still happens under the hood and JavaScript. But you do need to, it's tricky to put one in a linked list is you have the first link like a chain link that points to the next one, that points the next one.

[00:00:37]
Which means if you want to get to the 56th one, you have to go through all of them. But if you want to put a 33rd one in the middle, unlike them, link them back in, right? So it's just a data structure that is useful. It's one of those one where it's like, almost like breadth first search or depth first search.

[00:00:53]
You're like, I'm never going to need this, and then one day you absolutely need it once. I say this is somebody who had to write a breadth first search generator in JavaScript that work on purpose. Cool. And has written way too many compilers and parsers for reasons I don't totally understand.

[00:01:14]
I blame working on email editors and outlook. Anyway, so we said type was like a link or a link node, so we don't get confused with what links mean in the web. It's a way to say, I'm gonna use the same valuable multiple places, please store it somewhere.

[00:01:31]
So we say link is T, and then the value, Should also be a T. And then it can point to another one, which is a link node, optionally, because eventually this chain is gonna have to end somewhere, right? A link node that is also the same T. And all the generic really does for you is to say, whatever T is, it should be the same T everywhere, right?

[00:02:02]
And so if I say, const, Text node, and that is the type. Not literally string, I mean, you could do that too, but like. Then you'll notice it's angry at me, because it's like hey, values missing in your empty object as required. So, we say value, angry at me because it said had to be a string.

[00:02:41]
And then this one is saying, cool, you can point to another link note, but it also has to be a string, right? And if this one started as a number, It would have the same rules, right? And this is like what we'll see in a second, is how some of the React stuff isn't working for you.

[00:02:57]
But generally speaking, so then we could say like, is another link node, with the value. No question mark that time, though, right? And like this one has, it has to be a text node because the first one was, so it's automatically casting it. It's already told you what this T needs to be based on the first T.

[00:03:21]
Fine, fine, fine, whatever, right? That is, roughly you can think about them as variables for your type, that is not a wrong way of thinking about them. It's a little nuanced, but like, it's fine. The interesting part is the rule that we have repeatedly double-clicked on to use a business term is if TypeScript can figure it out on your behalf, you don't have to tell it what to do.

[00:03:45]
So let's try this. CreateLink, it's gonna be a function, and it's gonna take a value. And it's gonna return, That value in the array. So just hover over it, it's like yeah, I'm gonna yell at you about that any. So now it's like cool, you got to return one of these.

[00:04:16]
Okay, but what if I said, It was gonna be a function that returns at. All right, that will theoretically make whatever comes out known to be a link node. That's, I don't want to type that ever again, honestly. So the other way I could do that, will get better and better at this, as time goes on.

[00:04:53]
I could say that hey, I'm going to tell you that you should return a link node. All right, same basic effect. But what if I wanted to have linked nodes for numbers, objects, arrays. I don't, like, anything, I'm I going to make 1000 of these. And we may create a text node, and we're going to create, like whatever, like, no, I don't want to.

[00:05:19]
What I want to say is, yes, I'm going to tell you what the type should be. And what I want you to do is like make sure that I get the right type. So what I could say is, And one thing you have to do if you have JSX turned on, and this is why there's a little bit of reactism.

[00:05:38]
The compiler has a hard time figuring out, is Steve talking about generic here or is he starting to write some JSX? Right, so if you did like, that'll totally work. And if you did, t and u, t stands are type, by the way. U is because it's the letter after t.

[00:06:02]
That's the level of sophistication, like you'll see in the conventions. You can just put a comma too, and in JSX, if you're not using JSX, you don't have to do that. But the compiler gets very confused about what is JSX, and was the type. So now we're saying, cool, there is this idea of T.

[00:06:22]
And whatever T is, it better be the value, and it also better be the T and the link node, right? And you're like cool. Now it's a function that takes a T, and it returns a T. Great, excited, life's going on I don't have any T's around. Where this becomes cool is I can say, Interesting, both those words.

[00:07:10]
I'm not getting yelled at. String node. You're a link node string. Another node, your link node with number. I didn't even have to use a generic in there, right? If this reminds you of use state and use reducer, this is effectively how they were working, right? It's like, I'm a liberal arts major, but like, I was somewhat awake in algebra one, right?

[00:07:44]
Which is basically TypeScript is trying to figure out how to solve for t. Cool, you filled in the value, it figured out what T was and then confirm that the return value was also the same thing, right? As long as you solve for one of these, as long as you give TypeScript again, the recurring theme.

[00:08:02]
If you find yourself writing a ton of boilerplate right? That is a moment to step back and reflect, the moment that we're talking about a break. Sometimes you need to go for a walk to write better code. Right, it's a moment to go for a walk because a lot of times if TypeScript can figure it out, and sometimes it can't.

[00:08:18]
API requests when you're talking to a server. Guests could use PTO and generate types and import those types, as with cheating, you're importing the types. Generally speaking, like if it's something external or something like that, or something that's coming from like the user, like an input field, it could be a little trigger.

[00:08:33]
Or that hex code where like I did the is hex code thing we did there is. It's like there's occasional times when you have to step in. There's occasional times or arguments we have to help out. But generally speaking, if you're writing good, especially with React, which has a very good battle tested type system.

[00:08:49]
If you find yourself running a lot of type stuff, that is a moment for pause and reflection, right? So those are our generics, and we will see them on our journey to solve the create context issue that we had before. Are we ready to put that monster to bed?

[00:09:10]
We are going to pull out some generics. A little what I said before about sometimes you see them, they make you want to cry a little bit is true.