When we start using typescript with react, this is the big change we're going to make to the props
system, we're going to make sure that whenever we expect to receive some props inside of each child
component, we're going to define an interface inside of that component file.
That interface is going to define exactly what props we expect our child component to receive.
So, for example, the names of all these different props and the type of value that need to be provided
for each prop as well, by adding in this interface, we are allowing TypeScript to add in two really
big checks over our entire code base.
So this interface allows TypeScript to first make sure that we are providing the correct set of props
when we try to show this child component inside the parent.
So in other words, TypeScript is able to make sure that inside of our parent we are making use of the
child component correctly.
Secondly, TypeScript is able to use this interface to make sure that we are making use of the correct
set of props inside the child component itself, like the actual function component.
So that's really a check that goes on down here.
By just adding in this interface, we are enabling, TypeScript, to make sure that we're making use
of the component correctly inside a parent and to make sure that we're making use of the props themselves
correctly inside the child.
So let's try to find a new interface inside of our child component file and describe some Propp that
we want to communicate from the parent down to the child.
OK, so back inside of our child sex file at the very top, I'm going to define an interface called
child props.
So instead of here, we're going to define or describe all the different props we expect this component
to receive.
In this case, let's just say that we expect to receive one single prop called color, and I'll make
that a string.
Now that we've defined this interface, we need to actually apply it to our component in some way.
There are several different ways that you can apply an interface to a react component.
We're going to eventually start to investigate these three or four different methods.
But right now, I'm going to show you the most simple and straightforward way.
I'm going to add in a props argument to child right here, and I'm going to annotate the type of props
as child props.
Usually, however, we are not going to receive the entire props argument, usually we instead want
to just get the very particular properties out there that we want to access inside the child.
So we might instead decide to do a little bit of structuring and d structure out just color by itself.
So we can make use of that color prop inside of here.
The by just adding in this interface right here, we are allowing TypeScript to do a quick check and
make sure that we are making use of that correctly inside of our child component.
In other words, if you mouse over color right now, TypeScript very much understands that color is
supposed to be a string.
As soon as we added in that interface, you might also notice that our parents file now appears to have
an ear.
So this is the other cheek that typescript is able to do.
This is a check inside.
The parent typescript is able to say, hey, you're trying to show an instance of the child component,
but you have not provided the correct set of properties to it.
If we mouseover child right now, it's going to tell us that we want to show this component.
We must provide a color prop and it must be provided as a string.
But to make that air go away, we would add in, as you'd guess, there is some string.
And as soon as we add that in the air, a message goes away.
All right, so that's the essentially a big difference or big change with a prop system, once we start
making use of typescript, we're going to define an interface inside of that child component file and
it's going to define what props we expect our component to receive.
That interface definition is then used inside the child and the parent as well.
Now, as I mentioned, there are a couple of different ways we can apply that interface inside the child
component.
So let's take a look at these couple of different variations in the next video.