1
00:00:00,590 --> 00:00:05,420
We've seen a very simple way of defining a component and telling typescript that this component is going

2
00:00:05,420 --> 00:00:10,360
to receive some argument of child props, but there's kind of a downside to this approach.

3
00:00:10,400 --> 00:00:14,330
So in this video, we're going to examine that down side and take a look at another way that we can

4
00:00:14,330 --> 00:00:16,700
tell, TypeScript, about a component that we are creating.

5
00:00:17,390 --> 00:00:20,140
OK, so here's the downside with the code that we have written.

6
00:00:20,330 --> 00:00:26,060
We have told TypeScript, all TypeScript understands right now is that child is going to be a function

7
00:00:26,510 --> 00:00:30,860
that receives an argument of type child props and returns some amount of.

8
00:00:31,790 --> 00:00:34,030
That is all TypeScript currently understands.

9
00:00:34,310 --> 00:00:38,000
Now, that might sound like it is a complete story and it totally describes everything that is going

10
00:00:38,000 --> 00:00:40,250
on, but it really doesn't quite do.

11
00:00:40,250 --> 00:00:45,470
So, you see, here's the problem, TypeScript doesn't actually specifically understand that we are

12
00:00:45,470 --> 00:00:47,750
defining a react component.

13
00:00:48,320 --> 00:00:52,070
You and I, of course, can look at this and say, sure, it looks like a real component to me.

14
00:00:52,310 --> 00:00:56,450
But remember, there are other JavaScript libraries out there that also make use of.

15
00:00:57,620 --> 00:01:02,710
So there might be some other library that would use some exact value like this.

16
00:01:02,750 --> 00:01:06,800
There might be some other JavaScript library that would expect to receive some kind of function.

17
00:01:08,040 --> 00:01:14,820
That returns some amount of sex so tight script cannot just directly assume that we are defining specifically

18
00:01:14,820 --> 00:01:16,120
a react component.

19
00:01:16,470 --> 00:01:18,450
This might be some other kind of component.

20
00:01:18,900 --> 00:01:20,110
Now, why is that relevant?

21
00:01:20,160 --> 00:01:21,090
Why would we care at all?

22
00:01:21,090 --> 00:01:22,740
And does it actually make any difference?

23
00:01:23,040 --> 00:01:24,870
Well, yes, it definitely does.

24
00:01:25,140 --> 00:01:26,170
Here's a little bit of trivia.

25
00:01:26,700 --> 00:01:32,340
Remember, whenever you make use of a component or whenever you define one, you can optionally assign

26
00:01:32,340 --> 00:01:35,340
a couple of different properties to the react component itself.

27
00:01:35,790 --> 00:01:40,740
Properties such as types display name default props or context types.

28
00:01:41,490 --> 00:01:44,230
These different properties get assigned to the component itself.

29
00:01:44,250 --> 00:01:46,470
These are not like props to the component.

30
00:01:46,740 --> 00:01:49,070
They're assigned directly to say, child.

31
00:01:49,080 --> 00:01:53,340
So for example, you would write out something like child display name is whatever.

32
00:01:55,180 --> 00:02:00,370
Right now, TypeScript doesn't know that we are making specifically a react component, so TypeScript

33
00:02:00,370 --> 00:02:03,610
is not really going to understand any of these different properties.

34
00:02:03,610 --> 00:02:08,919
It doesn't know that our component can have a prop practice or default types or display name and so

35
00:02:08,919 --> 00:02:09,070
on.

36
00:02:09,490 --> 00:02:15,850
As a matter of fact, right now, if we just write out ChildNet display name by itself and then hover

37
00:02:15,850 --> 00:02:20,620
over that, we'll get an error message saying that this is a property that does not exist on this.

38
00:02:21,680 --> 00:02:23,970
So that is the shortcoming with this approach right here.

39
00:02:24,350 --> 00:02:28,280
It might appear to us that we are giving TypeScript the full story, but we really aren't.

40
00:02:28,280 --> 00:02:33,470
We are not directly telling, TypeScript, that this really, truly is a component that might have all

41
00:02:33,470 --> 00:02:37,270
the different properties that are actually associated with a react component.

42
00:02:38,120 --> 00:02:42,770
So to fix this, we're going to take a look at a slightly different way of defining a function component

43
00:02:42,770 --> 00:02:43,430
with TypeScript.

44
00:02:43,940 --> 00:02:45,890
I'm going to write out a second example down here.

45
00:02:47,300 --> 00:02:53,300
I'm going to write out Export Consed Child as F.C. See, the name right here doesn't make a difference.

46
00:02:53,300 --> 00:02:57,290
I'm just applying a different name so we do not have two components with the exact same name.

47
00:02:57,650 --> 00:03:01,130
So you can define or name the second component, anything you want to name it.

48
00:03:02,030 --> 00:03:04,340
After I put down the name, I'll then put down a Colin.

49
00:03:05,610 --> 00:03:07,620
React Dot FC.

50
00:03:08,530 --> 00:03:12,790
A set of angle brackets I'm going to put in child props inside their.

51
00:03:14,040 --> 00:03:15,090
And then assign.

52
00:03:16,340 --> 00:03:22,640
Essentially, the exact same components I'll put in color instead of curly braces, I'm going to return

53
00:03:22,640 --> 00:03:23,330
a div.

54
00:03:24,900 --> 00:03:29,880
That prints out that color and you'll notice I no longer have a colon right after that list of arguments

55
00:03:29,880 --> 00:03:32,790
right there or a colon or the child props thing.

56
00:03:33,680 --> 00:03:39,500
So this is another way of defining a function component with typescript, we can take either approach,

57
00:03:39,770 --> 00:03:43,180
but there are a couple of upsides or benefits if you take this style.

58
00:03:43,730 --> 00:03:47,690
Let's first examine what really happens with this line of code right here or what the real difference

59
00:03:47,690 --> 00:03:48,050
is.

60
00:03:49,690 --> 00:03:53,830
By taking this approach, we are now telling TypeScript a couple of different things, we are telling

61
00:03:53,830 --> 00:03:59,290
TypeScript that this is going to be a react function component, specifically because we are saying

62
00:03:59,290 --> 00:04:00,880
that it might be a component.

63
00:04:01,120 --> 00:04:05,560
That means that we might have some additional properties assigned to it, such as types, context,

64
00:04:05,560 --> 00:04:07,080
types, display, name and so on.

65
00:04:07,750 --> 00:04:13,450
We are also telling TypeScript that this component is going to receive a props object of type child

66
00:04:13,450 --> 00:04:13,930
props.

67
00:04:14,080 --> 00:04:16,260
That's what that set of angled brackets right there is doing.

68
00:04:16,959 --> 00:04:19,120
So we get all the benefits of what we had before.

69
00:04:19,269 --> 00:04:23,560
But now we can also work with these different properties on the component itself, such as Propp types,

70
00:04:23,560 --> 00:04:24,940
context types and so on.

71
00:04:26,070 --> 00:04:34,620
If we go back over and write out child as F, C dot, now my autocomplete is going to list out all those

72
00:04:34,620 --> 00:04:39,130
additional properties that are associated with the normal component, such as display name.

73
00:04:39,570 --> 00:04:44,940
So if I put in a child as F.C. display name, I also get that autocomplete.

74
00:04:45,640 --> 00:04:47,040
I don't get any air anymore.

75
00:04:47,040 --> 00:04:49,950
And if I mouseover that, I'm told that this might be a string.

76
00:04:49,950 --> 00:04:52,260
But if we never said it, it also might be undefined.

77
00:04:53,350 --> 00:04:58,870
So this is another way that we can set up a rehab component with TypeScript, which one is best for

78
00:04:58,870 --> 00:04:59,160
you?

79
00:04:59,170 --> 00:05:03,550
It really comes down to whether or not you want to access or make use of these additional properties.

80
00:05:03,850 --> 00:05:07,540
It is definitely not strictly required that you make use of this style of declaration.

81
00:05:07,720 --> 00:05:09,070
Again, it really comes up to you.

82
00:05:09,100 --> 00:05:12,190
And throughout this course, we might make use of both different styles.

83
00:05:13,590 --> 00:05:18,900
Last thing I would mention very quickly, you might see inside of some blog post documentation and whatnot,

84
00:05:19,110 --> 00:05:24,350
rather than writing out just F.C. right here, that is actually an abbreviation for function component.

85
00:05:24,720 --> 00:05:28,710
So you might see some documentation that says react dot function.

86
00:05:29,710 --> 00:05:32,980
Component instead, this is 100 percent identical.

87
00:05:33,160 --> 00:05:35,470
It's just a much longer way of writing this out.

88
00:05:35,800 --> 00:05:42,310
So chances are you usually want to make use of just F.C. unless you want to write out that entire name

89
00:05:42,490 --> 00:05:43,780
of function components.

90
00:05:44,730 --> 00:05:49,740
OK, so just a little bit more on props and typescript, because right here and move on in just a moment.