1
00:00:01,000 --> 00:00:05,650
When we start using typescript with react, this is the big change we're going to make to the props

2
00:00:05,650 --> 00:00:10,030
system, we're going to make sure that whenever we expect to receive some props inside of each child

3
00:00:10,030 --> 00:00:14,230
component, we're going to define an interface inside of that component file.

4
00:00:14,590 --> 00:00:19,510
That interface is going to define exactly what props we expect our child component to receive.

5
00:00:19,870 --> 00:00:24,700
So, for example, the names of all these different props and the type of value that need to be provided

6
00:00:24,700 --> 00:00:31,240
for each prop as well, by adding in this interface, we are allowing TypeScript to add in two really

7
00:00:31,240 --> 00:00:33,730
big checks over our entire code base.

8
00:00:34,250 --> 00:00:39,850
So this interface allows TypeScript to first make sure that we are providing the correct set of props

9
00:00:40,090 --> 00:00:42,550
when we try to show this child component inside the parent.

10
00:00:43,000 --> 00:00:48,730
So in other words, TypeScript is able to make sure that inside of our parent we are making use of the

11
00:00:48,730 --> 00:00:50,050
child component correctly.

12
00:00:50,910 --> 00:00:55,920
Secondly, TypeScript is able to use this interface to make sure that we are making use of the correct

13
00:00:55,920 --> 00:01:00,660
set of props inside the child component itself, like the actual function component.

14
00:01:01,480 --> 00:01:03,210
So that's really a check that goes on down here.

15
00:01:03,900 --> 00:01:08,190
By just adding in this interface, we are enabling, TypeScript, to make sure that we're making use

16
00:01:08,190 --> 00:01:12,300
of the component correctly inside a parent and to make sure that we're making use of the props themselves

17
00:01:12,300 --> 00:01:13,680
correctly inside the child.

18
00:01:14,460 --> 00:01:19,680
So let's try to find a new interface inside of our child component file and describe some Propp that

19
00:01:19,680 --> 00:01:22,170
we want to communicate from the parent down to the child.

20
00:01:24,380 --> 00:01:30,740
OK, so back inside of our child sex file at the very top, I'm going to define an interface called

21
00:01:30,740 --> 00:01:31,820
child props.

22
00:01:32,670 --> 00:01:37,040
So instead of here, we're going to define or describe all the different props we expect this component

23
00:01:37,040 --> 00:01:37,590
to receive.

24
00:01:38,060 --> 00:01:43,640
In this case, let's just say that we expect to receive one single prop called color, and I'll make

25
00:01:43,640 --> 00:01:44,450
that a string.

26
00:01:46,150 --> 00:01:50,510
Now that we've defined this interface, we need to actually apply it to our component in some way.

27
00:01:50,860 --> 00:01:55,010
There are several different ways that you can apply an interface to a react component.

28
00:01:55,210 --> 00:01:58,990
We're going to eventually start to investigate these three or four different methods.

29
00:01:59,140 --> 00:02:02,230
But right now, I'm going to show you the most simple and straightforward way.

30
00:02:02,950 --> 00:02:08,590
I'm going to add in a props argument to child right here, and I'm going to annotate the type of props

31
00:02:08,590 --> 00:02:10,150
as child props.

32
00:02:11,540 --> 00:02:15,650
Usually, however, we are not going to receive the entire props argument, usually we instead want

33
00:02:15,650 --> 00:02:20,240
to just get the very particular properties out there that we want to access inside the child.

34
00:02:20,570 --> 00:02:26,240
So we might instead decide to do a little bit of structuring and d structure out just color by itself.

35
00:02:27,110 --> 00:02:29,510
So we can make use of that color prop inside of here.

36
00:02:32,910 --> 00:02:38,680
The by just adding in this interface right here, we are allowing TypeScript to do a quick check and

37
00:02:38,680 --> 00:02:42,480
make sure that we are making use of that correctly inside of our child component.

38
00:02:42,850 --> 00:02:47,380
In other words, if you mouse over color right now, TypeScript very much understands that color is

39
00:02:47,380 --> 00:02:48,670
supposed to be a string.

40
00:02:50,250 --> 00:02:55,380
As soon as we added in that interface, you might also notice that our parents file now appears to have

41
00:02:55,380 --> 00:02:55,850
an ear.

42
00:02:56,370 --> 00:02:59,110
So this is the other cheek that typescript is able to do.

43
00:02:59,130 --> 00:03:00,090
This is a check inside.

44
00:03:00,090 --> 00:03:04,890
The parent typescript is able to say, hey, you're trying to show an instance of the child component,

45
00:03:05,040 --> 00:03:07,860
but you have not provided the correct set of properties to it.

46
00:03:08,280 --> 00:03:12,050
If we mouseover child right now, it's going to tell us that we want to show this component.

47
00:03:12,090 --> 00:03:15,810
We must provide a color prop and it must be provided as a string.

48
00:03:16,490 --> 00:03:21,510
But to make that air go away, we would add in, as you'd guess, there is some string.

49
00:03:22,470 --> 00:03:24,890
And as soon as we add that in the air, a message goes away.

50
00:03:26,380 --> 00:03:31,900
All right, so that's the essentially a big difference or big change with a prop system, once we start

51
00:03:31,900 --> 00:03:36,790
making use of typescript, we're going to define an interface inside of that child component file and

52
00:03:36,790 --> 00:03:40,060
it's going to define what props we expect our component to receive.

53
00:03:40,480 --> 00:03:44,210
That interface definition is then used inside the child and the parent as well.

54
00:03:44,980 --> 00:03:49,060
Now, as I mentioned, there are a couple of different ways we can apply that interface inside the child

55
00:03:49,060 --> 00:03:49,530
component.

56
00:03:49,810 --> 00:03:52,960
So let's take a look at these couple of different variations in the next video.