Typing Events

[00:00:00]
>> Steve Kinney: Cool, cool, cool. So we now know that if we pull out a function that we need to give it some amount of type hints, and that seems reasonable in this case, and we know that really it's just saying it's a change event handler and HTML input element. And again, the nice part is I didn't really have to remember that. At this point in my life, I remember it, but I don't have to, right? I can just hover over stuff and figure out if I wanted to then pull out these button elements, I can just take a mouse event handler over a button element, right?

[00:00:32]
And I can then, you know, begin, I can pull all of these out and make them things we pass around as well. And again, we can do that really in a lot of different places in this case. And even for some of the ones that are wild, like, can you copy and paste it all over the place? Yes. I will show you how to make helper types later, so that even if this stresses you out, you don't ever have to think about it again, right?

[00:00:58]
But we'll build up to that. But let's take this a little bit. Like I said, we'll turn the complexity down a little bit just to kind of explore if everything is like, all right, I'm kind of like, I half get it, like that's fine at this point, we're mostly just kind of exploring the space, we'll kind of dig in deeper as well. So do not fret. But if we wanted to like, for instance, start to pull this out, like one component's easy, it's usually when you have to start like passing props to other components that things become tricky.

[00:01:31]
So what we're going to do, I am going to pull out the what's called the counter controls, and then you will pull out the form and we'll just kind of get a sense of like, if this was multiple components, and we had to pass like some of the ability to either set the state, so on and so forth. There's a whole bunch of different ways that we can do this. We can explore them all if we want to. But let's look at like beginning to start pulling this component apart just to see where some of the complexity might creep up on us and some of the basic principles for how to navigate that.

[00:02:05]
So if I wanted to maybe grab this portion here and call it counter controls, right? Counter controls. And we'll just have it take no props for a second and return this. All right, obviously, it's a little salty about not knowing what set count is, right? And so we need to figure out how to have a prop for counter controls that knows how to set the count. And the easiest way to do that is what? Hover over the property to figure out what the type should be.

[00:02:47]
So you can do a, and you should, cause you will always regret doing this the other way. You can do a counter controls props, right? That is eventually going to be this set count, right, and we'll say set count is of the type, you know, if we could just literally say that it takes a number, right, we'll say count and number returns void. And then we could say set count is these counter controls props.

[00:03:32]
Counter control count control counter controls props, and you could see that like, it's not like super, like, it's okay with me here. Right, it also needs the, yes and no, it could theoretically need the count. It's super happy with taking a number and letting that be the value that gets past the set count. It is not happy, it doesn't know what count is, but it's also not happy with this other syntax where I would never need to pass in count, right?

[00:04:05]
Because this takes whatever the previous value was and increments it, because I'm just saying this takes a number, and that's it. So it's like, yo, this function that returns a number, and we could be like, okay, so you know what I'm going to do then? I'm going to say, or previous count, and we'll say that then equals, I think void. I gotta put that in parentheses too. This is a bad idea, so I'm not going to, there we go.

[00:04:38]
Previous number. Okay, that works, and now I theoretically would not have to pass and count at all, so we can say previous, previous plus one. And like, theoretically, the only squiggly ends I'm getting is I'm not actually using this thing just yet, so let's fix that. But this is where I'm warning you that could you do this, and you have just reinvented a type that already existed in React. And you've done a lot of extra typing, right?

[00:05:10]
And but it works because foundationally, that is effectively what the signature is. That is the glory of TypeScript type system, where like some other type systems like Java, it legit needs to be that type. TypeScript kind of like, okay, we're going to do type safety with a little bit of duck typing. Like, it doesn't necessarily have to be the exact right type, but if it like adheres to the interface of that type, we're going to let you get away with it.

[00:05:36]
So now you don't need to do abs, you know, enterprise fizz buzz with an abstract fizz class every time if you want to pass something through. So we'll pass this in. And we'll put our counter controls in here. Set count is set count. Right. And I'm getting yelled at because even though it worked up there, number was not appropriate to set a state action, cool, cool, cool. Really, what we want, again, like we said before, is just getting the right type and we'll see some other ways to do this in a second.

[00:06:22]
So what I would probably actually do is get the set draft count and get its actual type in this case and pop it in there. And that will give me a much better way to do this, cause now I don't necessarily have to start reinventing the wheel. Great, everything's good, so on and so forth.