This course has been updated! We now recommend you take the React and TypeScript, v2 course.
Transcript from the "Generics" Lesson
[00:00:00]
>> It turns out there is a whole bunch more of these utility types that we're goinna see that dynamically figure it out. But let's look back at color adjustment real quick to kind of see what's going on here. This right here, we've kind of we've danced around this a little bit and came up with some questions.
[00:00:16] Is effectively it's just gonna be called a generic property. We'll call it generic just for short, but it's effectively like a type variable, right, cool I'm gonna pass in a variable for reacts to look for components of a certain type as long as it fits this shape, and we can use those to create things for ourselves as well.
[00:00:38] All right, so we need to talk a little bit about generics. And generics this is the part where we know that we're gonna kind of dip into some of the more like TypeScript kind of specific stuff. But again, it's just enough to help us make some kind of sense of what we're kind of covered here as well.
[00:01:07] So generics are a really powerful concept but when you first see the syntax, it can be, a little bit squirrely and again. We are gonna kind of do as much as we need to make us somewhat dangerous, but we'll kinda go in, there are full courses on TypeScript you should definitely also check it out as well.
[00:01:33] But this is kinda the high level piece that will help us understand the syntax we write for some of these more complicated react patterns. All right, so here is a kind of example and we'll kind of pull this into a play ground in a second, we have this idea of a link and this is saying if we think about a linked list, right?
[00:01:53] Maybe there's a value and we don't wanna make a linked list that has string values, a linked list node that has number values, a linked list node that has Boolean values, that's unless you're getting paid by the hour, in which case yeah, go for it. But what we want to do is say, hey, we want to have this idea of a linked list node, or whatever.
[00:02:13] And we wanna be able to say like, if we decide there's gonna be a linked list of strings, that's fine but otherwise we wanna be able to reuse it. So we're saying for whatever kind of link list is, is plug in T everywhere that needs to go. So it's a linked list of strings, the value should be a string, and the next one should be another link list node of strings as well.
[00:02:36] So let's pull that in to the TypeScript playground. As well in here, and we'll paste this in. I'm just gonna make the font a little bit bigger. As well and so now we want to make a link list node we can say like node, not the greatest name when you talk about JavaScript, we'll go for it.
[00:03:09] What we can't say that it is the value of actually said that next is optional too. Otherwise, it's impossible to have a last note, right? So because a value as well, and if we wanna say that it is because right now it doesn't know that it's a language this assumes it's an object, so we could say, it should be a link.
[00:03:33] Typescripts angry with us, because it doesn't know is a generic type of link requires at least one type argument. All right, cool, so we'll say string and TypeScript is happy with us. We could change this to 42, TypeScript is now unhappy with us for a different reason. You can say const second is a link of the type number.
[00:04:01] And we can say the value is 42. Got maybe put an equal sign in there. And since T is defined as a string and the first one and a number and a second one, we can't link from the first node to the second node. So if they say I'm gonna rename this one first, if they first.next, equals the second one, I can't do that.
[00:04:28] Right, because you can't do a link of the type number to the one of a string. So basically, whenever we define it here is for the rest of the type, what T will be defined as anything, why T? Honestly it could be pizza, it could be sandwich, it could be anything you want.
[00:04:42] T is traditionally used for type, which leads to lots of bad habits too because you can have subsequent values in there so you're T and then a lot of times you'll see the next one being U. If T stands for type, what does U stand for? Nothing, it stands for the letter after T.
[00:05:01] So sometimes other languages you'll see use ABC, this could literally be you could use the full word type if you wanted to, they're just variable names. But basically, whenever this is defined here that's what it's gonna be for this entire time that's assigned to this object. This kinda makes sense though, right?
[00:05:17] When we use use state before, and we saw that it was a Boolean in those angle brackets. We knew that we could only change that piece of state to another Boolean, right, when we saw it as a string, it's hard codes it for that given object that we're talking about.
[00:05:33] But it also gives you a fairly interesting way to be able to kind of define new types on the fly. And that's what we saw in that previous one where it's was listen, I know we actually have this ability to create a type based on the props based on another type.
[00:05:50] What I would love for you to do is do that for me. It's cool, just give me the interface you want and I'll do that, so we see that here as well. Interestingly, you'll notice I had to define it here, if I removed it, it was angry at me, but clearly, we've omitted generics plenty of times so far in this course so then what gives and how do I get some of that goodness in my life.
[00:06:18] Well, lets take a look, one of this is kinda an order of operations thing right, its cool we're gonna define a value, we got to say what type it is, TypeScript has not totally figured it out yet what's going on here. Now, if we create a function, it becomes a little bit easier.
[00:06:36] So we say const create node, right? Actually, I'm gonna do this as a function. Create node and it's gonna take some value. And it's gonna return. That value here. Now, right now we gave it no type information and it doesn't know what's going on here. But what we can do is say all right, create node and what I want you to do.
[00:07:08] I'm going to tell you effectively, what yeah, will tell you all right, I want this to be T, right? So we'll say create node two and for whatever T's value should also be that T and you're gonna return So this will be Actually will take, yeah And so in this case, we can go ahead and say, create node.
[00:07:54] Look at it, it knew that it was a string and we'll do another one. And this is some of the stuff that we got to see in our react components before. Which is TypeScript was again trying to do us a favor and figure out what was going on here which is, all right we know that create node should take some type variable called T, the value should be a T and should create a link of T.
[00:08:21] So someone's got to tell it what T is at some point, we could say string and then it will definitely know. But in the absence of that information, TypeScript tries its hardest to figure it out for you, right? And so it's, cool, all right, yeah, we should have this idea of T.
[00:08:41] That should be what the value is, it should be a link of T but if you pass in a string cash goes like, well, I have one piece of the puzzle. I have figured out that I have this idea of T, the argument should definitely be whatever that is.
[00:08:53] It's a string, T must be a string and it figures it all out. And that's how we got away with a lot of this TypeScript kind of figuring stuff out for us and us not necessarily having to do it, which is a lot of this logic around that and piecing together the puzzle, right?
[00:09:10] And so these generics are an incredibly powerful way to create some very useful abilities what we saw that before with our adjustment props, we're gonna look at higher order components in a little bit. Where it's a idea of a component that can wrap any other component well do you have to make if you had to make it for every single component you wanted to wrap, the pattern of higher order components in react wouldn't make any sense.
[00:09:35] But with the generics, and this I built it to say like okay, for whatever you pass in, that's what I want the typing to be around. That's gonna be the protections I offer in TypeScript. It gives you a very powerful way to both have type safety in your application, but at the same time, also have the ability to be really flexible with your code in a way that allows as you're coming from JavaScript or another language like Ruby or Python.
[00:10:01] You're thinking type language they don't let me do things that are flexible, that's not true. Again, the generics are really, really powerful way to make that happen.