1
00:00:00,120 --> 00:00:02,070
- In the last video, we
talked about the union type,

2
00:00:02,070 --> 00:00:04,230
which is saying one
thing must be something

3
00:00:04,230 --> 00:00:05,520
or something else.

4
00:00:05,520 --> 00:00:07,920
In this video, I wanna talk
about the intersection type,

5
00:00:07,920 --> 00:00:09,240
which is essentially the opposite,

6
00:00:09,240 --> 00:00:10,380
where I'm saying something must be

7
00:00:10,380 --> 00:00:13,590
both one type and another
type at the exact same time.

8
00:00:13,590 --> 00:00:14,423
It's essentially the way

9
00:00:14,423 --> 00:00:16,140
for you to combine
different types together

10
00:00:16,140 --> 00:00:18,510
with an and-style syntax.

11
00:00:18,510 --> 00:00:20,490
So let's take for example,
I have a type here,

12
00:00:20,490 --> 00:00:24,150
which is gonna be Person,
and this Person has a name,

13
00:00:24,150 --> 00:00:25,410
there's a string,

14
00:00:25,410 --> 00:00:27,810
and we're gonna give it
an age, which is a number.

15
00:00:27,810 --> 00:00:29,160
That's working perfectly fine.

16
00:00:29,160 --> 00:00:32,190
What if I also want to have
some people that have IDs?

17
00:00:32,190 --> 00:00:34,620
So I can say like Person with ID.

18
00:00:34,620 --> 00:00:36,390
Well, that is my normal Person type,

19
00:00:36,390 --> 00:00:39,000
but I also want to add an
ID onto the end of this,

20
00:00:39,000 --> 00:00:41,550
so what I can do is I can
use the ampersand symbol.

21
00:00:41,550 --> 00:00:43,770
This allows me to combine
different types together.

22
00:00:43,770 --> 00:00:45,810
Just like you use the pipe symbol for or,

23
00:00:45,810 --> 00:00:49,170
use ampersand for and, and
this is gonna be one ampersand,

24
00:00:49,170 --> 00:00:51,570
similar to how you use two
ampersands in JavaScript

25
00:00:51,570 --> 00:00:52,410
to do an and,

26
00:00:52,410 --> 00:00:54,870
in TypeScript, you just use one ampersand.

27
00:00:54,870 --> 00:00:57,150
And now I can add a new type,
which is gonna be an ID,

28
00:00:57,150 --> 00:00:59,280
which in my case is going to be a string.

29
00:00:59,280 --> 00:01:02,640
And now this type is combining
together my Person and my ID.

30
00:01:02,640 --> 00:01:05,130
So let's come down here
and we'll create a Person.

31
00:01:05,130 --> 00:01:06,990
And first, we're gonna
give them the Person type,

32
00:01:06,990 --> 00:01:09,090
so we're gonna see how
this specifically works.

33
00:01:09,090 --> 00:01:11,310
So we can say that this
Person is gonna have a name,

34
00:01:11,310 --> 00:01:12,333
which is Kyle,

35
00:01:13,919 --> 00:01:15,870
and we're gonna give
them an age, which is 28.

36
00:01:15,870 --> 00:01:17,370
As you can see, we get no errors at all

37
00:01:17,370 --> 00:01:19,860
because it only expects a name and an age.

38
00:01:19,860 --> 00:01:21,900
If we change it to a Person with ID,

39
00:01:21,900 --> 00:01:23,160
we're now going to get an error,

40
00:01:23,160 --> 00:01:25,920
and that's essentially saying
here, property ID is missing,

41
00:01:25,920 --> 00:01:28,080
but it expects there to be an ID property

42
00:01:28,080 --> 00:01:30,450
because we said it should
have this ID property,

43
00:01:30,450 --> 00:01:32,250
'cause we're saying it has to be a Person

44
00:01:32,250 --> 00:01:35,160
and it has to be a type
that has an ID of a string.

45
00:01:35,160 --> 00:01:37,710
So by coming here and I give
it an ID of just whatever,

46
00:01:37,710 --> 00:01:38,910
it doesn't matter,

47
00:01:38,910 --> 00:01:40,110
you can now see it, when I save,

48
00:01:40,110 --> 00:01:41,790
I'm no longer getting any errors

49
00:01:41,790 --> 00:01:43,290
because I'm specifically adding

50
00:01:43,290 --> 00:01:44,910
that ID property to my Person,

51
00:01:44,910 --> 00:01:47,310
and this is asking for them to have an ID.

52
00:01:47,310 --> 00:01:49,440
So this is a really common modifier to use

53
00:01:49,440 --> 00:01:50,820
when you essentially want to add things

54
00:01:50,820 --> 00:01:52,620
to a type that already exists.

55
00:01:52,620 --> 00:01:54,990
In this case, we're adding
an ID to a Person type

56
00:01:54,990 --> 00:01:56,010
that already exists

57
00:01:56,010 --> 00:01:59,580
to make it more specific by
adding more content to it.

58
00:01:59,580 --> 00:02:01,380
Now, if you wanted to
do this with interfaces,

59
00:02:01,380 --> 00:02:02,460
you actually can do this,

60
00:02:02,460 --> 00:02:04,200
but the syntax is quite a bit different.

61
00:02:04,200 --> 00:02:05,970
So it doesn't matter if this
is a type or an interface,

62
00:02:05,970 --> 00:02:07,380
we'll just change it to an interface,

63
00:02:07,380 --> 00:02:09,690
just so we can see
everything as an interface.

64
00:02:09,690 --> 00:02:10,803
There we go.

65
00:02:10,803 --> 00:02:11,636
We have our Person interface.

66
00:02:11,636 --> 00:02:13,470
Now if we wanted to
use our Person with ID,

67
00:02:13,470 --> 00:02:15,060
we would change this to an interface,

68
00:02:15,060 --> 00:02:17,040
and what we would need to
do to create this interface

69
00:02:17,040 --> 00:02:19,500
is we instead would say
that it needs to extend.

70
00:02:19,500 --> 00:02:21,810
So we say it extends this Person,

71
00:02:21,810 --> 00:02:23,100
and then we can actually define

72
00:02:23,100 --> 00:02:25,260
what the actual add-on is going to be.

73
00:02:25,260 --> 00:02:27,150
And if we wanted to
extend multiple things,

74
00:02:27,150 --> 00:02:28,800
I would just put them inside of here.

75
00:02:28,800 --> 00:02:31,050
So let's say that we
have another interface,

76
00:02:31,050 --> 00:02:33,090
and this one is just gonna be Todo,

77
00:02:33,090 --> 00:02:35,250
and it's just going to
say complete, false,

78
00:02:35,250 --> 00:02:36,390
or not false, boolean.

79
00:02:36,390 --> 00:02:37,223
There we go.

80
00:02:37,223 --> 00:02:38,520
Doesn't really matter what this is.

81
00:02:38,520 --> 00:02:40,410
If I wanted to extend multiple things,

82
00:02:40,410 --> 00:02:42,510
I would just put them both
inside of this list right here.

83
00:02:42,510 --> 00:02:44,190
And now I'm getting an error on my Person

84
00:02:44,190 --> 00:02:46,020
'cause the complete property is missing.

85
00:02:46,020 --> 00:02:48,210
So it's extending all of
these different things,

86
00:02:48,210 --> 00:02:50,340
and then this right here
is the actual definition

87
00:02:50,340 --> 00:02:51,720
for my interface,

88
00:02:51,720 --> 00:02:54,150
similar to how this is the
definition for the type.

89
00:02:54,150 --> 00:02:56,250
And what I could do is I could
just completely remove this.

90
00:02:56,250 --> 00:02:58,650
If I just wanted to combine
together two different things,

91
00:02:58,650 --> 00:02:59,610
I could do that as well,

92
00:02:59,610 --> 00:03:01,200
and this would just need
to be empty brackets,

93
00:03:01,200 --> 00:03:02,033
just like that.

94
00:03:02,033 --> 00:03:03,690
And this essentially
just combines together

95
00:03:03,690 --> 00:03:05,610
my Person and my Todo.

96
00:03:05,610 --> 00:03:07,140
Now going back to what we had before,

97
00:03:07,140 --> 00:03:09,030
if I wanted to do this as types instead,

98
00:03:09,030 --> 00:03:11,223
let's change all of these to be a type,

99
00:03:11,223 --> 00:03:13,920
make this here an equal,
this here an equal.

100
00:03:13,920 --> 00:03:14,790
And again, it doesn't matter

101
00:03:14,790 --> 00:03:16,530
if these first two are
types or interfaces.

102
00:03:16,530 --> 00:03:18,690
It doesn't make any difference
for what we're doing.

103
00:03:18,690 --> 00:03:19,890
And I'm gonna come down here,

104
00:03:19,890 --> 00:03:22,230
and instead of doing an
extend, I'm gonna do an equal,

105
00:03:22,230 --> 00:03:23,880
separate this by an ampersand,

106
00:03:23,880 --> 00:03:25,470
and then separate this by an ampersand.

107
00:03:25,470 --> 00:03:27,120
So if you want to do multiple things,

108
00:03:27,120 --> 00:03:28,920
and it together as an intersection,

109
00:03:28,920 --> 00:03:31,170
you just do an ampersand
between each and every one.

110
00:03:31,170 --> 00:03:32,700
And now this Person with ID

111
00:03:32,700 --> 00:03:34,650
needs to include all the
properties of Person,

112
00:03:34,650 --> 00:03:35,790
all the properties of Todo,

113
00:03:35,790 --> 00:03:39,599
and all the properties of
this custom ID object here.

114
00:03:39,599 --> 00:03:42,090
Now, unlike a union type, though,

115
00:03:42,090 --> 00:03:43,830
the ampersand intersection type

116
00:03:43,830 --> 00:03:46,860
is not useful when it
comes to primitive values.

117
00:03:46,860 --> 00:03:48,870
So normally if we wanna do like a literal

118
00:03:48,870 --> 00:03:50,670
where you say the status
is going to be complete

119
00:03:50,670 --> 00:03:52,230
or incomplete or something else,

120
00:03:52,230 --> 00:03:53,370
that makes sense as a union,

121
00:03:53,370 --> 00:03:55,050
but as an intersection,
that doesn't make sense,

122
00:03:55,050 --> 00:03:57,720
'cause we can't have a type
that is both a complete status

123
00:03:57,720 --> 00:03:59,250
and an incomplete status and draft.

124
00:03:59,250 --> 00:04:00,480
It can't be all three at the same time.

125
00:04:00,480 --> 00:04:01,560
It has to be one of them.

126
00:04:01,560 --> 00:04:03,120
That's why we use a union.

127
00:04:03,120 --> 00:04:04,620
So you can never use a union with,

128
00:04:04,620 --> 00:04:06,930
for example, like a primitive number type.

129
00:04:06,930 --> 00:04:08,220
This will always give you a failure

130
00:04:08,220 --> 00:04:10,410
because I cannot both be an object

131
00:04:10,410 --> 00:04:12,120
and a number at the same time.

132
00:04:12,120 --> 00:04:14,730
So if you're using primitives
inside of your intersections,

133
00:04:14,730 --> 00:04:15,870
that's obviously a red flag.

134
00:04:15,870 --> 00:04:18,090
Don't do that, because
it just doesn't work.

135
00:04:18,090 --> 00:04:19,980
You can't have an object and
a number at the same time.

136
00:04:19,980 --> 00:04:21,510
They just don't work together.

137
00:04:21,510 --> 00:04:23,820
And the same thing happens
if I try to add a Person

138
00:04:23,820 --> 00:04:25,590
that has the same property
as something else.

139
00:04:25,590 --> 00:04:28,050
So here my Person has a name and an age.

140
00:04:28,050 --> 00:04:29,130
We'll get rid of this Todo for now

141
00:04:29,130 --> 00:04:30,450
'cause we don't really need it,

142
00:04:30,450 --> 00:04:31,283
and what I'm gonna do,

143
00:04:31,283 --> 00:04:34,020
and then I'm gonna add a
name property here as well.

144
00:04:34,020 --> 00:04:36,120
I'm gonna say name here is
going to be equal number,

145
00:04:36,120 --> 00:04:37,530
just to give it a different type.

146
00:04:37,530 --> 00:04:39,030
And now you're gonna
notice I'm getting errors

147
00:04:39,030 --> 00:04:40,620
because I can't have a name

148
00:04:40,620 --> 00:04:43,230
that is both a number and a
string at the exact same time.

149
00:04:43,230 --> 00:04:44,160
That just doesn't work.

150
00:04:44,160 --> 00:04:45,420
It's impossible.

151
00:04:45,420 --> 00:04:46,253
You need to make sure

152
00:04:46,253 --> 00:04:48,270
if you're using this
ampersand intersection

153
00:04:48,270 --> 00:04:49,830
that you don't have overlapping types

154
00:04:49,830 --> 00:04:51,330
that have incompatible types,

155
00:04:51,330 --> 00:04:52,163
'cause if you do,

156
00:04:52,163 --> 00:04:53,880
it's going to give you an
error no matter what you do

157
00:04:53,880 --> 00:04:55,440
since it's impossible to have a name

158
00:04:55,440 --> 00:04:58,173
that is both a number and
a string at the same time.