1
00:00:00,300 --> 00:00:02,100
- Now this video is gonna
be the most complex one

2
00:00:02,100 --> 00:00:03,630
when it comes to TypeScript and React,

3
00:00:03,630 --> 00:00:06,090
and that's how you deal
with generic components

4
00:00:06,090 --> 00:00:08,220
because oftentimes, you
wanna have a component

5
00:00:08,220 --> 00:00:09,870
that can accept generic data

6
00:00:09,870 --> 00:00:11,790
and doing that is a
little bit complicated.

7
00:00:11,790 --> 00:00:13,260
So, in this case I have a list,

8
00:00:13,260 --> 00:00:15,090
and the list just takes
in an array of items,

9
00:00:15,090 --> 00:00:16,220
and these items can be anything.

10
00:00:16,220 --> 00:00:18,960
In our case, it has an ID
of 1 and a name of Kyle.

11
00:00:18,960 --> 00:00:20,730
But you know, it could
have an age of, like, 28,

12
00:00:20,730 --> 00:00:21,810
for example, onto here.

13
00:00:21,810 --> 00:00:24,120
It doesn't matter. It's just
a random array of items.

14
00:00:24,120 --> 00:00:26,580
All I know that it is an array of items.

15
00:00:26,580 --> 00:00:27,630
And then I have two functions.

16
00:00:27,630 --> 00:00:29,460
One is allowing me to get a key.

17
00:00:29,460 --> 00:00:30,960
So here, I know my ID is unique,

18
00:00:30,960 --> 00:00:32,340
so I'm using that as my key.

19
00:00:32,340 --> 00:00:34,470
It just takes a function
which passes in an item

20
00:00:34,470 --> 00:00:36,690
and returns to me what the
key for that item will be.

21
00:00:36,690 --> 00:00:39,120
And then the render item
again passes in an item

22
00:00:39,120 --> 00:00:40,590
and returns to me some JSX

23
00:00:40,590 --> 00:00:43,230
for rendering out that item
inside of a list format.

24
00:00:43,230 --> 00:00:45,930
As you can see here, it's
rendering out my list just fine.

25
00:00:45,930 --> 00:00:47,160
We look at the list component here.

26
00:00:47,160 --> 00:00:48,660
We just ignore the type
at the top for now.

27
00:00:48,660 --> 00:00:49,493
We can look down here.

28
00:00:49,493 --> 00:00:50,326
We're getting our items,

29
00:00:50,326 --> 00:00:52,590
our getKey function and
our renderItem function.

30
00:00:52,590 --> 00:00:54,150
We're looping through all of our items.

31
00:00:54,150 --> 00:00:55,860
We're setting the key by calling getKey,

32
00:00:55,860 --> 00:00:58,530
and we're rendering out the
content by calling renderItem.

33
00:00:58,530 --> 00:00:59,520
Now for our type,

34
00:00:59,520 --> 00:01:01,380
I'm not really sure what
we should do in this case.

35
00:01:01,380 --> 00:01:02,430
That's why I've left some comments

36
00:01:02,430 --> 00:01:04,290
because I don't know
what our item type is.

37
00:01:04,290 --> 00:01:06,300
I know our items are some type of array.

38
00:01:06,300 --> 00:01:08,160
Our getKey takes in some item

39
00:01:08,160 --> 00:01:09,870
and returns to us a React.Key.

40
00:01:09,870 --> 00:01:11,730
And our renderItem
again takes in some item

41
00:01:11,730 --> 00:01:14,880
and returns to us a ReactNode,
but what is this item?

42
00:01:14,880 --> 00:01:16,710
I could manually type this item.

43
00:01:16,710 --> 00:01:20,610
We'll just come up here
and we'll say, "type Item,"

44
00:01:20,610 --> 00:01:24,843
and let's just say ID is a
number and name is a string.

45
00:01:25,710 --> 00:01:28,740
And now, if we replace
these with that item,

46
00:01:28,740 --> 00:01:30,897
we make sure that this says "Item."

47
00:01:32,137 --> 00:01:32,970
"Item."

48
00:01:32,970 --> 00:01:35,040
You can now see all of
our code is working fine,

49
00:01:35,040 --> 00:01:37,080
or at least it looks
like it's working fine

50
00:01:37,080 --> 00:01:39,600
until I decide to change this
to have some other property.

51
00:01:39,600 --> 00:01:42,390
For example, now I put an age into here

52
00:01:42,390 --> 00:01:44,310
and now, obviously, this
is no longer working

53
00:01:44,310 --> 00:01:45,720
'cause it doesn't have just an ID name.

54
00:01:45,720 --> 00:01:47,610
It now has this age property, too.

55
00:01:47,610 --> 00:01:49,530
Essentially, I want my
code to be smart enough

56
00:01:49,530 --> 00:01:50,850
to look at what my items are

57
00:01:50,850 --> 00:01:52,980
and just figure everything
else out by itself,

58
00:01:52,980 --> 00:01:54,600
and that's where generics come in.

59
00:01:54,600 --> 00:01:55,433
So what we can do is we can

60
00:01:55,433 --> 00:01:57,090
get rid of this item type completely.

61
00:01:57,090 --> 00:01:59,430
And instead, I want this
to take in a generic type.

62
00:01:59,430 --> 00:02:00,960
You can call this anything you want.

63
00:02:00,960 --> 00:02:04,050
Common practice, people use
the letter T for a generic.

64
00:02:04,050 --> 00:02:05,220
But if I wanted to, I could say

65
00:02:05,220 --> 00:02:07,260
that this is like our
ItemType, for example.

66
00:02:07,260 --> 00:02:08,460
I'm just going to call this, yeah,

67
00:02:08,460 --> 00:02:09,293
we'll call it ItemType

68
00:02:09,293 --> 00:02:10,770
so it's a little bit more descriptive.

69
00:02:10,770 --> 00:02:13,140
So, what I can do in here is
I can just paste this down.

70
00:02:13,140 --> 00:02:14,040
Instead of saying, "Type,"

71
00:02:14,040 --> 00:02:15,870
we'll just say "Item" just like that.

72
00:02:15,870 --> 00:02:17,970
So now, we have a generic item type.

73
00:02:17,970 --> 00:02:20,430
We don't know what this is.
It's just some generic value.

74
00:02:20,430 --> 00:02:22,650
And we want our function
here to be able to take in

75
00:02:22,650 --> 00:02:24,030
a generic type.

76
00:02:24,030 --> 00:02:25,227
We'll again call this Item,

77
00:02:25,227 --> 00:02:28,380
and we'll pass this along
to here as the generic here.

78
00:02:28,380 --> 00:02:30,420
So now, we've removed
all of our errors because

79
00:02:30,420 --> 00:02:32,670
essentially we're saying
we have an array of items.

80
00:02:32,670 --> 00:02:35,010
I don't know what the type is.
It's just some random type.

81
00:02:35,010 --> 00:02:36,930
My getKey is taking in some item,

82
00:02:36,930 --> 00:02:38,130
and it's returning this key.

83
00:02:38,130 --> 00:02:40,110
And this renderItem is again
taking in the same item

84
00:02:40,110 --> 00:02:42,450
and returning to us an
actual React element.

85
00:02:42,450 --> 00:02:43,530
Everything is working fine.

86
00:02:43,530 --> 00:02:45,720
And again, the way we set up
these generics is our function.

87
00:02:45,720 --> 00:02:47,520
We just put some angle brackets after it

88
00:02:47,520 --> 00:02:49,020
and put in the generic.

89
00:02:49,020 --> 00:02:50,820
We can call this whatever we
want, like we could call it T,

90
00:02:50,820 --> 00:02:52,200
and it's going to work just fine.

91
00:02:52,200 --> 00:02:54,265
I called it Item to be a
little bit more descriptive.

92
00:02:54,265 --> 00:02:55,110
Same thing here.

93
00:02:55,110 --> 00:02:56,700
We passed along that generic, and up here,

94
00:02:56,700 --> 00:02:58,830
we're accepting a generic and
we're just typing everything

95
00:02:58,830 --> 00:03:00,420
based on that generic.

96
00:03:00,420 --> 00:03:01,860
Now inside of our app, what's happening,

97
00:03:01,860 --> 00:03:04,110
which is really cool, is
it's automatically inferring.

98
00:03:04,110 --> 00:03:06,960
It's saying, okay, our items
we know is of type Item.

99
00:03:06,960 --> 00:03:07,793
It's an array of them.

100
00:03:07,793 --> 00:03:09,190
So, we know that each one of these items

101
00:03:09,190 --> 00:03:10,860
is of that item type.

102
00:03:10,860 --> 00:03:12,360
So now, when I come down here to my item,

103
00:03:12,360 --> 00:03:14,070
you can see it's typed
to be an ID: number,

104
00:03:14,070 --> 00:03:15,360
name: string, age: number.

105
00:03:15,360 --> 00:03:17,940
Now, if I remove my
age from both of these,

106
00:03:17,940 --> 00:03:20,310
you'll now see this item
no longer has that H type.

107
00:03:20,310 --> 00:03:21,750
It's automatically being inferred

108
00:03:21,750 --> 00:03:24,270
by typescripts and all
that generic goodness.

109
00:03:24,270 --> 00:03:26,430
Now, sometimes TypeScript
may not be smart enough

110
00:03:26,430 --> 00:03:28,230
to infer what your actual type is

111
00:03:28,230 --> 00:03:29,820
so if you need to manually specify

112
00:03:29,820 --> 00:03:31,530
the type of a generic component,

113
00:03:31,530 --> 00:03:33,270
you can do that right
after your component name.

114
00:03:33,270 --> 00:03:34,650
Just put your double angle brackets

115
00:03:34,650 --> 00:03:37,230
and put the type that you
want to define inside of here.

116
00:03:37,230 --> 00:03:39,300
So, we'll say that our
type is going to be an ID,

117
00:03:39,300 --> 00:03:43,500
which is a number and a
name, which is a string.

118
00:03:43,500 --> 00:03:45,150
And let's say that it's
also gonna have an age,

119
00:03:45,150 --> 00:03:46,500
which is a number.

120
00:03:46,500 --> 00:03:48,240
And if we make that age optional,

121
00:03:48,240 --> 00:03:50,070
now what you'll see is
that we're passing along

122
00:03:50,070 --> 00:03:50,903
everything and it's working.

123
00:03:50,903 --> 00:03:52,800
And our item, if we hover
over it has that type

124
00:03:52,800 --> 00:03:55,710
that we specified, ID: number,
name: string, and an age,

125
00:03:55,710 --> 00:03:58,110
which is either a number or undefined.

126
00:03:58,110 --> 00:04:00,330
So, to real quick recap, the
way that you set up a generic

127
00:04:00,330 --> 00:04:01,980
is you need to make sure
you specify your function

128
00:04:01,980 --> 00:04:04,590
as a generic function and your
props are also going to be

129
00:04:04,590 --> 00:04:05,850
a generic prop type.

130
00:04:05,850 --> 00:04:08,610
And then whatever you have
that depends on that generic,

131
00:04:08,610 --> 00:04:09,570
you just pass that along

132
00:04:09,570 --> 00:04:11,010
through the generics everywhere here

133
00:04:11,010 --> 00:04:12,930
so we're using this item type everywhere.

134
00:04:12,930 --> 00:04:14,520
We're not hard coding anything.

135
00:04:14,520 --> 00:04:17,130
And then, when we define our
component and actually use it,

136
00:04:17,130 --> 00:04:19,800
whatever we pass in most
often is going to be inferred

137
00:04:19,800 --> 00:04:22,380
so we don't even need to
specify the actual type.

138
00:04:22,380 --> 00:04:23,610
But if you need to specify the type,

139
00:04:23,610 --> 00:04:25,383
you can do that in line, as well.