1
00:00:00,120 --> 00:00:03,150
- So far we haven't really
covered that much of TypeScript.

2
00:00:03,150 --> 00:00:05,581
We already know enough
TypeScript to do quite a bit.

3
00:00:05,581 --> 00:00:08,580
But if you want to handle
any more complex types

4
00:00:08,580 --> 00:00:10,140
or some more specific types,

5
00:00:10,140 --> 00:00:11,790
you're gonna need to
know different ways to

6
00:00:11,790 --> 00:00:14,820
modify your types by
using your existing types.

7
00:00:14,820 --> 00:00:15,960
That's what this entire section

8
00:00:15,960 --> 00:00:18,210
of the course is going to be all about.

9
00:00:18,210 --> 00:00:20,460
Now we already talked
about one type of modifier

10
00:00:20,460 --> 00:00:22,680
which is like an optional parameter inside

11
00:00:22,680 --> 00:00:25,410
of an object type and that
actually leads directly

12
00:00:25,410 --> 00:00:27,030
into the next modifier
I want to talk about

13
00:00:27,030 --> 00:00:28,830
which is a union modifier.

14
00:00:28,830 --> 00:00:31,470
Union modifier is essentially
taking multiple types

15
00:00:31,470 --> 00:00:33,330
and saying that something is one

16
00:00:33,330 --> 00:00:35,080
of multiple different things.

17
00:00:35,080 --> 00:00:36,870
Take for example an id.

18
00:00:36,870 --> 00:00:40,140
Let's just say I have an
ID and it's equal to seven,

19
00:00:40,140 --> 00:00:42,210
but let's say that I want
this ID to either be a

20
00:00:42,210 --> 00:00:45,360
string or a number just because
the way my system is built

21
00:00:45,360 --> 00:00:48,120
this can be an ID of a number or a string,

22
00:00:48,120 --> 00:00:50,010
but right now I have no way to type that

23
00:00:50,010 --> 00:00:51,120
because if I look at this,

24
00:00:51,120 --> 00:00:52,621
let's just make it a let

25
00:00:52,621 --> 00:00:53,981
so we can actually see the type here.

26
00:00:53,981 --> 00:00:56,220
And notice when I hover over this

27
00:00:56,220 --> 00:00:57,510
obviously it says it's a string

28
00:00:57,510 --> 00:00:58,620
and if I change it to a number,

29
00:00:58,620 --> 00:00:59,850
it says it as a number

30
00:00:59,850 --> 00:01:01,410
and it doesn't let me change between them.

31
00:01:01,410 --> 00:01:03,540
For example, I can't
redefine this as a string.

32
00:01:03,540 --> 00:01:05,850
That's obviously gonna
throw an error for me.

33
00:01:05,850 --> 00:01:08,400
So instead what I can do is
I can define a specific type

34
00:01:08,400 --> 00:01:11,100
for this ID and that type
is going to be string

35
00:01:11,100 --> 00:01:12,420
and then I use the pipe symbol,

36
00:01:12,420 --> 00:01:13,980
which is that vertical bar

37
00:01:13,980 --> 00:01:15,339
and then I can say or number.

38
00:01:15,339 --> 00:01:17,240
That's essentially what this is like.

39
00:01:17,240 --> 00:01:19,710
And if you know the OR
syntax in JavaScript

40
00:01:19,710 --> 00:01:20,850
which is just two of these,

41
00:01:20,850 --> 00:01:22,740
essentially it's the exact same type

42
00:01:22,740 --> 00:01:24,883
of idea where it's saying this or this

43
00:01:24,883 --> 00:01:28,050
or we're just using one
pipe symbol instead of two.

44
00:01:28,050 --> 00:01:29,190
Now when I hover over my id

45
00:01:29,190 --> 00:01:31,860
you can see it's either
a string or a number.

46
00:01:31,860 --> 00:01:35,640
And if I say my ID is equal
to the string of seven

47
00:01:35,640 --> 00:01:37,440
now you can see I no
longer get any errors.

48
00:01:37,440 --> 00:01:39,240
But if I try to set it to
something like a Boolean

49
00:01:39,240 --> 00:01:41,203
I'm obviously gonna get an error

50
00:01:41,203 --> 00:01:42,090
cuz that's not within my union.

51
00:01:42,090 --> 00:01:43,890
I can add it to my union if I wanted.

52
00:01:43,890 --> 00:01:46,618
For example, I can just come in here

53
00:01:46,618 --> 00:01:48,080
and I can add onto a Boolean

54
00:01:48,080 --> 00:01:49,340
and now you can see it can be

55
00:01:49,340 --> 00:01:50,340
one of those three different types.

56
00:01:50,340 --> 00:01:51,720
This is actually something
you should already

57
00:01:51,720 --> 00:01:53,880
be familiar with a little
bit because if we go

58
00:01:53,880 --> 00:01:55,877
back to that person type example,

59
00:01:55,877 --> 00:01:57,181
here we go,

60
00:01:57,181 --> 00:01:59,877
and we had that is
programmer field in here

61
00:01:59,877 --> 00:02:01,260
and we made it optional.

62
00:02:01,260 --> 00:02:04,020
So we can say is programmer
is an optional Boolean.

63
00:02:04,020 --> 00:02:05,820
When we hover over this to see the type,

64
00:02:05,820 --> 00:02:06,870
you'll notice that the type of this

65
00:02:06,870 --> 00:02:08,850
is just Boolean or undefined.

66
00:02:08,850 --> 00:02:10,440
Essentially when you
put this question mark

67
00:02:10,440 --> 00:02:11,670
it's just doing a union.

68
00:02:11,670 --> 00:02:14,610
I can actually just write
this as this right here.

69
00:02:14,610 --> 00:02:16,140
And these both mean the exact same thing.

70
00:02:16,140 --> 00:02:18,810
You can see when I hover, I
get the exact same output.

71
00:02:18,810 --> 00:02:21,090
So that question mark syntax
is really just a shortcut

72
00:02:21,090 --> 00:02:24,180
for doing a union between
undefined and a Boolean

73
00:02:24,180 --> 00:02:25,980
or whatever other type you wanted.

74
00:02:25,980 --> 00:02:27,540
So let's back this up to
where we had it before.

75
00:02:27,540 --> 00:02:29,460
And let's say I wanted to
add an ID inside of here.

76
00:02:29,460 --> 00:02:31,400
Again, I could just say this is a number

77
00:02:31,400 --> 00:02:36,139
or a string just like that.

78
00:02:36,139 --> 00:02:38,280
And now that's a kind
of a use case of where

79
00:02:38,280 --> 00:02:39,870
you'd want to have these union types.

80
00:02:39,870 --> 00:02:42,264
So it's really great if you want something

81
00:02:42,264 --> 00:02:43,410
to be one of multiple different things.

82
00:02:43,410 --> 00:02:44,936
And another case where
it's really useful is

83
00:02:44,936 --> 00:02:47,400
if you have like a status for example.

84
00:02:47,400 --> 00:02:49,240
So let's say that we
change this to a to-do

85
00:02:49,240 --> 00:02:52,560
and the to-do can either be complete,

86
00:02:52,560 --> 00:02:53,880
incomplete or like draft.

87
00:02:53,880 --> 00:02:55,020
So we'll say status.

88
00:02:55,020 --> 00:02:56,440
And normally you would just say string

89
00:02:56,440 --> 00:03:00,030
and I could just say const to-do equals,

90
00:03:00,030 --> 00:03:01,650
let's get rid of all
these other properties.

91
00:03:01,650 --> 00:03:03,750
We'll just give it a name.

92
00:03:03,750 --> 00:03:05,070
There we go.

93
00:03:05,070 --> 00:03:07,661
And I can say that the
name is going to be laundry

94
00:03:07,661 --> 00:03:11,130
and our status is going to be complete.

95
00:03:11,130 --> 00:03:11,963
There we go.

96
00:03:11,963 --> 00:03:13,560
And let's say that I have
three different statuses

97
00:03:13,560 --> 00:03:15,840
complete, incomplete, and draft.

98
00:03:15,840 --> 00:03:17,310
Let's say I've made a typo.

99
00:03:17,310 --> 00:03:18,810
I put like a D at the end of complete.

100
00:03:18,810 --> 00:03:20,220
You'll notice I'm not getting any errors

101
00:03:20,220 --> 00:03:22,230
or warnings because I
typed this as a string.

102
00:03:22,230 --> 00:03:24,000
It can be any string at all.

103
00:03:24,000 --> 00:03:26,430
But if I want it to be just
those three different types

104
00:03:26,430 --> 00:03:28,050
well I can put that in a union.

105
00:03:28,050 --> 00:03:30,570
I can say it's either
going to be complete,

106
00:03:30,570 --> 00:03:32,850
it's going to be incomplete,

107
00:03:32,850 --> 00:03:35,310
or it's going to be draft.

108
00:03:35,310 --> 00:03:36,920
And now if I give that a quick save

109
00:03:36,920 --> 00:03:40,560
and I make sure I type this
to-do as a type of to-do

110
00:03:40,560 --> 00:03:42,780
you're gonna notice we get
an error on this status.

111
00:03:42,780 --> 00:03:44,970
If I change it back here to
where it was just a string

112
00:03:44,970 --> 00:03:47,520
you notice no errors at all,
everything's working fine,

113
00:03:47,520 --> 00:03:49,980
but when I give it this
specific union here

114
00:03:49,980 --> 00:03:52,560
now when I hover you can see
it says type completed is not

115
00:03:52,560 --> 00:03:55,590
assignable to the type complete
or incomplete or draft.

116
00:03:55,590 --> 00:03:57,000
Did you mean to write complete?

117
00:03:57,000 --> 00:03:58,590
And you know what, that's
exactly what I meant.

118
00:03:58,590 --> 00:03:59,820
Let's change this and now you can see

119
00:03:59,820 --> 00:04:01,200
that I no longer get the error.

120
00:04:01,200 --> 00:04:04,424
And the really great thing is
I actually get auto complete.

121
00:04:04,424 --> 00:04:05,370
You can see it says complete
draft or incomplete.

122
00:04:05,370 --> 00:04:07,230
So it gives you my exact
three options right here

123
00:04:07,230 --> 00:04:08,400
which is really cool.

124
00:04:08,400 --> 00:04:10,440
You can even go further by making a union,

125
00:04:10,440 --> 00:04:11,899
a union of multiple different types.

126
00:04:11,899 --> 00:04:14,301
For example, let's say I have a to-do.

127
00:04:14,301 --> 00:04:16,744
Let's just come in here with a person type

128
00:04:16,744 --> 00:04:20,310
which is just a name and an age.

129
00:04:20,310 --> 00:04:21,810
Well, I could create another type

130
00:04:21,810 --> 00:04:23,910
if I really wanted that
is a union of these two.

131
00:04:23,910 --> 00:04:27,510
For example, I could say
type to-do person equals

132
00:04:27,510 --> 00:04:29,190
and I'm just gonna take the to-do type

133
00:04:29,190 --> 00:04:31,110
and union it with the person type.

134
00:04:31,110 --> 00:04:32,700
Now you can see when I hover over this

135
00:04:32,700 --> 00:04:35,910
that this to-do person is
either a to-do or a person.

136
00:04:35,910 --> 00:04:38,940
And if I wanted, I could write
out my type for my person

137
00:04:38,940 --> 00:04:41,130
here in line so I could do it like this,

138
00:04:41,130 --> 00:04:42,810
that will also work just fine.

139
00:04:42,810 --> 00:04:44,250
Both of these are gonna work.

140
00:04:44,250 --> 00:04:46,350
And the really nice thing
about this is it's a great way

141
00:04:46,350 --> 00:04:49,230
of being able to combine together
different things and this

142
00:04:49,230 --> 00:04:52,410
or syntax right here is
really easy to use with types.

143
00:04:52,410 --> 00:04:53,880
Now, quickly talking about the difference

144
00:04:53,880 --> 00:04:55,620
between interfaces and types,

145
00:04:55,620 --> 00:04:57,990
I cannot do a union with an interface.

146
00:04:57,990 --> 00:05:00,300
Like I can't say that this
is going to be an interface

147
00:05:00,300 --> 00:05:02,670
called to do person which is
a union of these two things.

148
00:05:02,670 --> 00:05:03,600
It just doesn't work.

149
00:05:03,600 --> 00:05:04,650
There's no way to do that.

150
00:05:04,650 --> 00:05:06,990
If you wanna do a union of
multiple different things

151
00:05:06,990 --> 00:05:08,430
you need to use a type.

152
00:05:08,430 --> 00:05:10,770
Now these sections up here
for the person and the to-do,

153
00:05:10,770 --> 00:05:12,420
those could be written as interfaces,

154
00:05:12,420 --> 00:05:15,090
but my union would specifically
have to be written as a type

155
00:05:15,090 --> 00:05:16,800
which is just another
reason why I like to use

156
00:05:16,800 --> 00:05:19,830
types instead of interfaces
cuz I can't do certain things

157
00:05:19,830 --> 00:05:21,933
with interfaces that I can do with types.