React and TypeScript React and TypeScript

Typing Hooks & Component Solution

Learning Paths:
Check out a free preview of the full React and TypeScript course:
The "Typing Hooks & Component Solution" Lesson is part of the full, React and TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Steve live codes the solution to the Typing Hooks and Component exercise.

Get Unlimited Access Now

Transcript from the "Typing Hooks & Component Solution" Lesson

[00:00:00]
>> So we've got a little bit of a version of that of the exercise here, right? We've got a cow that we're keeping in a hook. Nothing surprising here. It knows that it's a number. It's expecting a number. The things that we've kinda seen before. Some of the extra bonus things I did just to kinda make a point.

[00:00:19] Was pulling out the functions or updating the state. In this case, you do need to say that it is in fact a number, cuz these functions aren't aware of where they're going to be used right? So again, with TypeScript, we, if TypeScript, if isn't painfully obvious to TypeScript what's happening.

[00:00:36] Then we just simply need to explain our intent. So in this case, these two increment decrement functions, because any of the use state hooks will also take a function. They're used down here as well. They're outside of the component, there outside of all the context. These could be in a separate file somewhere else, right?

[00:00:57] It could be a third party library, that you installed to increment, decrement numbers. As JavaScript, we all know that there's probably a library. So, in this way we say as a number, TypeScript has figured out, then it returns a number as I kind of joked in the very beginning, which is, if it takes a number you're adding one to it.

[00:01:19] It can look that all possibilities of this function will always return a number no matter what. Great. There's interesting part here, that I wanna kinda take a look at for a second, is this change count? Cuz right now we have effectively a not dissimilar version from, we saw the class based example.

[00:01:40] The interesting part of the class base example was, we had it in a method on the class. Here we have it in a helper function. What would happen now, if we in lined it, just like we did with the increment and decrement ones here as well? So I'm actually gonna make a second version of this input field just to demonstrate a point.

[00:02:01] And I'm gonna grab this function and I'm going to inline it. And we'll face it right in there. And you can see it works. The interesting part is, because it's an inline function, on and on change, handler on an input element, we can actually get rid of all this extra information.

[00:02:30] Right? But didn't you tell me that I had to define it? Yeah, cuz before, this is just a function that we're storing in a variable name. It doesn't touch, you can't figure out the context in which it's gonna be called. So, we have to just say listen, this is roughly where I expect to use.

[00:02:46] It just protects me from myself please. Going down here, you can see that it assumes, since you have put it on a change handler, an input element that the event is a change event on an input handler, right? So it basically, does what we think it's going to do in this case.