In this video, we're going to try to figure out why we are getting an error message from this line
up here, but not if we define the same function directly in line on the on change prop.
The reason we're seeing this error message is all because of that type inference system in typescript
and how it works.
Remember, TypeScript is always trying to figure out the different types of values blowing around your
application.
One tool it has to do that is the type inference system.
If we take a look at the this input element right here and then mouseover on change, you'll notice
that TypeScript is 100 percent aware of what that on change probably is.
It understands that it is a prop.
It understands that we are required to provide some kind of callback function to it.
This right here says that if we decide to provide in all that function to on change, it's going to
have a first argument that we might call event and its type will be that right there.
So a type for that event object.
If you mouseover E right here in line, you'll notice we get the exact same type.
So that is the type inference system in typescript being applied to this on change callback.
However, the type inference system is not applied if we defined the function ahead of time.
So even if we define the function ahead of time, even if we pass down on change like so, the inference
will not be applied.
Type inference is only applied inside of our JSA when we define that callback function directly in line.
So how are we going to solve this?
How are we going to define and change ahead of time and still somehow annotate the type of event object
right here?
Well, it's going to be pretty straightforward.
We're still going to have an event object.
I'm going to very quickly rename it just to make our code a little bit more clear, because E is not
very clear.
Then to apply a Type two event right here, let me show you a little trick, I'm going to mouseover
on change and then going to find the react change event right here, highlight it, copy it, put a
call in after event and then paste that type in.
So this is essentially the exact same thing as type inference where we're kind of taking that inferred
type or the required type of change.
We are just manually placing that type right there.
Now, our event object is properly typed and we can refer to all different kinds of properties on it,
such as event target value or whatever else we want to access.
And you will notice that if we look at this event type right here, it says change event, but there
are other kinds of events that we handle inside of Recode, such as maybe a hover or a drag or other
stuff like that that we might want to annotate as well.
So let's take a quick pause.
Come back in just a moment.
And I want to show you a couple of other types of events that you might want to be aware of.