React and TypeScript Typing CSS Styling

[00:00:00]
>> The other thing we might want to do is, again, this is where it gets into the React specifics, is you could see a world where this could get problematic, right? Like this inline style on this section, right? We are just used to that being a JavaScript object, and you can pass in anything, and you can misspell anything that you want, right?

[00:00:26] You can say this is border, and you would see that the borders vanished. Now, that's a really distinct change from my very beautiful purple borders to see them vanish. I'm probably well aware of that one. But you can imagine something where you misspell margin or something and it just looks slightly off, it gets a little bit trickier to see.

[00:00:46] Now, React has gone out of its way to figure out, you probably didn't mean to do that, right? Cuz it's not assignable to the type CSSProperties, right? Again, that is another React built-in type that basically understands all of the style properties that you can pass into a component, and says that's not one of them, right?

[00:01:10] And so basically, very quickly catches any of those misspellings, right? And this is a super simple one, but you can see some of those more insidious bugs that we deal with in our code is simply, there was some kinda misspelling, some kind of mistake. TypeScript seeks to find out all those things and give you immediately a red squiggly line that shows you where the issue can be to make it a lot easier for you.

[00:01:34] And one of the best ways to learn what kind of type you might need is simply to hover over stuff, right? So you can see that this is using React.CSSProperties, or undefined in this case, right? I don't know why you'd pass it undefined, I guess if you don't have a defined, right, which nothing will get passed in.

[00:01:54] But otherwise it has this React.CSSProperties. So what would happen if we wanted the ability to be able to pass in to the box another prop, which is okay, and you can pass in whatever other CSS styles that you want. So let's figure out how we might do that.

[00:02:13] Well, we wanna have another property here. And we'll say style, and by default style is an empty object. Right, and TypeScript is a little annoyed with us. Well, it's never red and that's true, but it does not exist on the style BoxProps. Let's go change this back to ReactNode.

[00:02:36] We're going to find this second property here as well. Now, because it has a default value, there's a lot of cases where I don't wanna pass in a style, which I do style question mark. And I can say at this point that it'll be React.CSSProperties, right? And this will appease it, now I can say this one.

[00:03:16] All right, that's gotta be a string, right, and CSS in there like it's okay. All right, and we'll actually say this is a border color. And if we don't use it in the component, nothing happens. So here we'll also spread it out. Right, and so now we can pass styles in.

[00:03:40] Now, it is an optional property. And Steve, didn't you say that if you use an optional property, that TypeScript will yell at you? I did say that. But because it has a default, TypeScript knows that in no case will it be undefined. It'll either be what they passed in as a prop or it's gonna be an empty object, both of which can be spread.

[00:04:02] But if we, for instance took this out, right, in this case we gotta take it out here as well. Right, you can see that it is, maybe it's not. It's actually yelling us from when it doesn't, so it's trying to catch us like, hey listen, you said this was required, it's not being used here at all.

[00:04:26] So for any of those little, the way it manifests might change a little bit. But like any kind of those cases where we might have done something unintentionally or have an edge case, TypeScript is going to seek to try to find it for us. So let's actually put that back the way it was.

[00:04:38] So we will say style exists, and we will say that it should be an empty object by default.