Typing Children Exercise

[00:00:00]
>> Steve Kinney: So, your mission is mostly to make sure your setup works and get a little bit of the blood flowing. We've got this other component over here, it's called typing children, which is, if we could figure out that a JSX function or React function returns JSX element, right? Can we figure out what the type of a child is in React? Is it JSX element? I don't know, you have to figure it out for yourself. So we have this silly component that again, you can look at, you cannot look at, right?

[00:00:37]
Which is, okay, we want to find the type that allows us to pass a string in as a child for a React component, null, or an actual component or an array of components, because if you have like a UL you might have multiple list items underneath. We need to figure out the type for React child so we can type children with the appropriate type in the same way that we did string, string, number, and Boolean.

[00:01:03]
Well, what would be the type for children? Right. And so your job is to go into this fun little file here. I at least gave you a hint of things to try, right? See, our goal is to get rid of this any and replace it with what children ought to be. One, to make sure everything's set up, two, to get the blood flowing, and three, to practice that skill of your job is not to look it up. So kind of just round back to that previous question and then we'll jump in.

[00:01:41]
Deducing the type of children is kind of some of the differences between types and interfaces. You can see there is, are they exactly the same? No. Is there a relative amount of green, even when you see these little warning signs, that's in some cases, right? And so like the reds in the places where they truly don't match, there are differences, but like I said, those will come up in those unique use cases, but generally speaking, whatever the pattern is, like, I would say like interfaces make a ton of sense, right?

[00:02:24]
And possibly choose that one. It doesn't necessarily, it's not like the decision you will either will be the make or break in your entire codebase, right? I would argue consistency is more important. There are differences, but there's a lot more in common than there are differences. Cool, cool, cool. So, the goal of like these, this child component here, and then this kind of like, I mean this box which can take child components, is throughout this nested boxes.

[00:02:59]
I've tried to at least in one, I guess I could have thrown null in here too, to like throw in the various combinations of what could go into a React component. So just a string, a like HTML that is not nested, nested HTML more than one node, right? So that as we kind of play around here, we should be yelled at in various different ways. Ideally, at this point, you know the answer cause you figured it out, so I will not ask, what do we think the answer is, cause someone will just yell at the right answer and ruin all the fun for me.

[00:03:39]
But let's go kind of do the experimental kind of piece in this case. So here we're saying box props is any, so everything works and nothing fails. And I did, you know, because I have ESLint trying to catch me from accidentally doing that at any point, or at least, let me be nicer than that, yell at my coworkers when they think it's okay to do it, Alex. And like, kind of catch those things early and often, but we can try the various different options here and we'll see with some red squigglies when it does or does not work.

[00:04:13]
So we'll pull in, I think we gotta pull in JSX just like we did before. And with this case, we do see some red squigglies, right? Where if we have JSX element, which was the return type of one of those functions, then it's like, hey, that is, I mean, it sounds fair too, right? JSX children probably expect a single child of element, right, and we have more than one in there. So that cannot be the right answer because that is one element.

[00:04:41]
And so you'd be like, well, then why don't I just do like an array of them. Right, well, that breaks when you just have either a string or just one of them, so on and so forth. So that can't, that can't be the answer either. And even the either or, and so like this like union operator, it's not wrong to think about like in JavaScript, the like two of them for an or statement. Is it totally right? It's not, but it's not wrong either.

[00:05:12]
So, as you can see, that doesn't work because again, that string gets us yelled at. Boxings don't accept text as their child elements. Well, that's not going to do the job for us either. These two are fake answers. They're actually functions in React, and actually have properties and stuff like that. The right answer in this case is everyone's good friend, React, ReactNode. And we'll even see how you don't ever need to remember that.

[00:05:44]
But let's pop that in there and see that that is in fact the right answer in this case as well. Great. And so now it is React to ReactNode, we see no red squigglies, which means it's correct. You're like, I am never going to remember that. Fine. Right, and we'll talk about a little bit what utility types are in a second. But the high level is React also gives us a few of these helper types, and one of them, and in fact, because box props isn't really bringing anything to the table, I can bring in this other one called props with children.

[00:06:27]
And I feel like you can remember that one. Right, and we'll get to generics in a little bit, but props with children, effectively by default, it's this crazy weird type, but it's saying like optionally, we want to say that it can support children of React ReactNode, but then also it's like if you want to say, hey, a box should also take a width and a height and also children, you can do this, you can say type box props again is props with children.

[00:07:12]
And then in these like angle braces do like width, number, height, number, right? And now box props is a set of properties that are the width as a number, the height as a number, now I'll get some red squigglies because I don't support that anywhere. And then also children, right? So that will automatically just kind of append React children in there as well. The only time where you might want to like say, hey, I don't want to do this is, let's say you want to say like, and having children like as part of this component is mandatory, right?

[00:07:48]
That question mark is going to make it optional. Right, and so in this case, you could do something like, you would get rid of this, we can make our own helper later, and we will, because I know I wrote the lesson plan. We could say in this case it was children. And that's where we can just say React. And now a box has to have a child, right, because it's no longer got that question mark, right, and that's kind of the difference there in that case for us.

[00:08:29]
Cool, cool, cool, but like, effectively, those are some of the like helpers that exist. So it's also worth like, in some cases kind of like going through and seeing what the various options are. The other things that you can kind of see as you go through is like HTML elements have types provided by React. You're like, well, what are they? Hover over stuff, right? And like some of these are a little like long, but like I think you can mostly get a sense of like what's going on here, which is we have a class name, right, that is available on all HTML elements, that is either class name or, you know, a string or undefined in this case.

[00:09:14]
You can hover over the actual element itself, and these are all like defined in the @react/types package when we talk about some of the configuration, we'll take a look at. These, there's basically simply a type file that is available that is kind of pumped in for you as part of our setup and we'll see that momentarily. But generally speaking, if you're trying to look for a given thing, hovering over it will give you the answer, right?

[00:09:40]
So if you're like, I have this component and I need something, you know, that takes this particular component, hovering over stuff is a great way to figure out what everything is. Right? And so like, clearly, like we've got this React CSS properties, right? And what's nice about that and what we seek to do with our own types is once we have that, we can do stuff like the act of typing BAC autofills in all of the possible style attributes that are on that CSS properties type, right?

[00:10:12]
So now all of a sudden, I don't have to remember, obviously background. It's pretty easy. But for, you know, even background blend mode, right, I can go first define that, and then at this point, get all of the possible answers, right? And what we want to do is not only add type safety for application, but give ourselves the gift of good autocomplete for maybe the various props that our components and our design system take.

[00:10:40]
So if like buttons are primary, secondary, danger, and ghost. If somebody misspells ghost or tertiary, or whatever, that we could catch them and also give them the same autocomplete, right, just by having our types in place at the same time. And so we want to give ourselves this gift as well, and we will, because we're worth it. The other thing that is super useful at a given point is if one was to hold command on a Mac, I don't know what it is on Windows or Linux, but one could hold the various modifier keys and probably figure out within 30 seconds.

[00:11:17]
One can jump into the types, in this case for React and JSX, but honestly for anything and also get a sense and explore. A lot of times if I'm trying to figure out what the other properties and object takes in a given library, I could stop what I'm doing, leave my editor, go Google it and try to read the docs, or I can hit command, click on it, jump and look at the actual definition, right? If we wanted to go, for instance, look at a HTML span element, right, we can see that that just extends HTML element because there's no unique properties to a span, but you can kind of jump around and see all the types, particularly in any given library that you use, not just React, right?

[00:11:59]
Any library that you use, if it does have some amount of support for types, whether in the package itself or with the types like @types/whatever the library name is, you can a lot of times get a sense for the, you know, what arguments you're expecting, whether it's Vite configuration. You can go to the Vite docs, or you can also just like, go find the Vite config, and I want to find like, okay, what does defined config take?

[00:12:25]
First of all, I can hover over it, and we'll also talk about how to get yourself fun little documentation very easily. I can also then command click, jump in and see that like, oh, what's a user config, and start to see what all the options for a user config is without having to like break my chain train of thought. Now, this is useful for libraries, but again, our goal is to also make our own app as easy to navigate because it's a large enough application, a lot of times you're jumping into the other file to try to figure out what it is, even if you wrote it three months ago, to see what it is.

[00:00:00]
In this case, you can very quickly either through hovering or command clicking, go ahead and see what even your own code, library code, whatever takes and accepts in various different cases.