Using Generics with React Components

[00:00:00]
>> Steve Kinney: If I go into this utility belt, I've got some extra exercises here that were always meant to be an exercise for the reader a little bit, but the ones that I tend to use a lot, and I did this JS docs in here just so you can hover over and see, um, so you know how there was props with children? Props with children always makes children optional. Right, if you wanted to have the same basic type, um, you can basically, I have a different utility function, which is props with required children, which will wrap anything.

[00:00:35]
I don't necessarily care what it is, but it will also say that you have, I could technically make that like a React function or whatever. It's fine. Um, this is like whatever properties I gave you, so if I said like, uh, type for, I don't know, button props is props with required children, and we'll say that it's also got, um, or danger. Now you get a set of props, whereas you've got to have a variant of primary or danger, and you have to have a child in there, you cannot have a button that has no content.

[00:01:26]
Right, um, and so that's basically, and, you know, if one were to hover over the props with children, the only difference is there's a question mark here. I'm not like some super genius that came up with this. I basically said, I want one where I can force it, right, and you can do that as well. Um, another one. Oh, this one is great, and I do not understand why it is not in the React types bundle.

[00:01:56]
This will, you know how parameters gave you the, um, all the arguments for a function. This, you can give it a component and it will get you the prop type back out. Right, and so if we said something like, um, button is like, I should have kept that other one up there a second ago. Oh well, um, variant is primary or secondary and I don't know, return a button. Uh, it's not a TSX file. I hate everything.

[00:02:43]
I'm going to have it return null now because it doesn't really matter what it returns and I don't feel like changing the file extension at this point. Uh, so like button is theoretically would be a JSX element. If I said, um, button props equals uh component props, type of that button, you will see that I get the prop type of that. Where is this super useful? You're using a library that has a bunch of React components, and they didn't give you the types for any of the props.

[00:03:27]
Go make them yourself. Right, grab the components, like, create, like reverse engineer the types yourself, right? And then you don't have to like find where those, anytime like, anytime a library has not given you the prop, like the types that you need, you can use this or parameters or return type to like reverse engineer the types in case you need to do stuff with them. Even if it is like using that to like satisfy a Zod schema.

[00:03:55]
Like, hey, I am going to use this third-party library. They did not give me the props. I will then grab those, I will extract those props from the component and then use a Zod schema to make sure I have the right thing. Fine, it works, right? Do you need these every day? No. Do you even need to write them yourself? Probably not. This, I don't even think I'm going to, like, I will take no credit for any of these.

[00:04:21]
Um, this is like the weird utility kit that I just copy and paste, like I actually have a template for new projects. Uh, these are ones because I'm tired of typing this. You saw me typing in earlier. I don't like to, I don't like to remember is change event handler, HTML input element. So now I just have one that wraps up because I use it all the time. That's fine. Like, they can be convenient. Submit handler, same basic idea.

[00:04:52]
Right, um, mouse event handler, uh, set state is, remember that kind of crazy one we copy and pasted? I don't want to do that ever again. I have one called set state. I remember it's called set state. I import it. Life is good. Um, and so you can use these throughout your codebase for anything you kind of, these are the ones that I usually have for all sorts of things. Um, remember we use that component props without ref, and it was like the props we said plus everything a button does.

[00:05:21]
This does like the opposite. It will take out all of the other things. So if I had this cool button component in my design system, and I only want the unique props, this does the opposite of what that does. And so, some of these are just like for things you might need, if you are not given the types by a library, by, you know, other code that you have, and you don't want to reverse engineer it, you can a lot of times like TypeScript type system is Turing complete.

[00:05:49]
Right, there is very little you cannot do. Some of it is horrifying to look at, like you have types that are ternaries, like you can do some wild stuff, but it is technically Turing complete, and if you do not have the types that you need, you can do stuff to like extract that data back out. Um, and so I put some of these in here that I use all the time, you can have them, like, as long as you understand spiritually what they do, I don't necessarily care that you understand what like, um, every single, like some of these are very straightforward, I'm just lazy.

[00:06:27]
And like, again, if the issue is like, I don't like to use TypeScript, because it hurts, because it's tedious, make it less tedious for yourself. Not hard. Um, but yeah, so you can use a lot of these for like we said before, like creating a design system, the button that will have all the stuff, you can use a lot of these different techniques, and if the utility type you need doesn't exist, a lot of times you can probably, uh, make it in some way, shape or form.

[00:06:55]
Uh, and I, you know, honestly, like, I probably shouldn't say this, but I'm going to. Uh, if you spiritually, like, if the only thing you get out of this section is knowing that you can do stuff like this, you know what you do at that point? You go to ChatGPT and tell it what you need. Right? And like, just as long as you know that it's a thing that can be done, and like you don't have to do a bunch of wild stuff, you can usually like figure out like what to do in this case.

[00:07:25]
I'm not saying that you have to like master all this stuff all the time, but like knowing that you can versus like the failure pattern is trying to handwrite a type that is mostly like the type you needed. It is better to pull out the actual source of truth than it is, you know, in the case of like this one, which is, if you just look at this one, this takes anything, um, and like we'll pull out all of the properties on an HTML.

[00:07:55]
It's just omitting them. That's all. It's just taking out anything from an HTML element out of a like an object of types, right? And so if you did this to the like button component that also took variant of uh primary and secondary, then you would get only that variant back out. It's useful when you have a need, sitting here like, I'm going to study these and learn them all, like do it if you want, but like I would wait for the need and know that the ability to kind of like, you have a Turing complete type system where you can pull out what you want is the important takeaway, um, from this section.