1
00:00:00,150 --> 00:00:01,080
- So far in this course,

2
00:00:01,080 --> 00:00:03,330
we've talked a lot about
how you can create types,

3
00:00:03,330 --> 00:00:05,130
modify types, and assign types

4
00:00:05,130 --> 00:00:07,140
to different variables and functions.

5
00:00:07,140 --> 00:00:08,190
But in this section of the course,

6
00:00:08,190 --> 00:00:10,140
I wanna talk about how
you can take those types

7
00:00:10,140 --> 00:00:13,290
and utilize them in your
code with type narrowing.

8
00:00:13,290 --> 00:00:14,460
In this video in particular,

9
00:00:14,460 --> 00:00:16,500
I wanna be talking all about type guards,

10
00:00:16,500 --> 00:00:19,050
which were an incredibly
powerful feature of TypeScript

11
00:00:19,050 --> 00:00:21,210
that allows you to have fairly vague types

12
00:00:21,210 --> 00:00:22,800
that you can make much more specific

13
00:00:22,800 --> 00:00:24,540
in your actual JavaScript code.

14
00:00:24,540 --> 00:00:26,760
It's really amazing how this works.

15
00:00:26,760 --> 00:00:28,170
Let's take for example, this code.

16
00:00:28,170 --> 00:00:30,930
We have a Todo type that has
a title which is a string.

17
00:00:30,930 --> 00:00:33,420
It has a priority of High, Normal, or Low.

18
00:00:33,420 --> 00:00:34,890
We have an isComplete boolean.

19
00:00:34,890 --> 00:00:37,740
We have an optional description
that's going to be a string.

20
00:00:37,740 --> 00:00:38,700
And then we have a dueDate.

21
00:00:38,700 --> 00:00:40,860
And this dueDate is either a Date

22
00:00:40,860 --> 00:00:43,620
or it's a string in some type
of like timestamp format.

23
00:00:43,620 --> 00:00:44,850
We don't know which one it's going to be,

24
00:00:44,850 --> 00:00:47,910
we just know it as one of
these two different formats.

25
00:00:47,910 --> 00:00:49,710
Working with this could be kind of tricky

26
00:00:49,710 --> 00:00:51,540
because we have things that are optional

27
00:00:51,540 --> 00:00:53,460
and things that can be multiple types,

28
00:00:53,460 --> 00:00:54,360
but with TypeScript,

29
00:00:54,360 --> 00:00:55,920
it ensures that we make sure we check

30
00:00:55,920 --> 00:00:57,360
for all these different things

31
00:00:57,360 --> 00:00:59,490
and handle every single possible use case

32
00:00:59,490 --> 00:01:01,680
and it makes it really easy to do.

33
00:01:01,680 --> 00:01:03,000
The very first thing I wanna talk about

34
00:01:03,000 --> 00:01:05,340
is the most simple type of type guard,

35
00:01:05,340 --> 00:01:08,070
that is just checking
what type something is.

36
00:01:08,070 --> 00:01:11,550
For example, this dueDate can
either be a string or a Date.

37
00:01:11,550 --> 00:01:13,230
So we can check what the type of it is

38
00:01:13,230 --> 00:01:15,060
to determine what we're going to do.

39
00:01:15,060 --> 00:01:16,560
'Cause right now, if we come into here

40
00:01:16,560 --> 00:01:19,887
and I just do a quick consult
log of our Todo.dueDate,

41
00:01:19,887 --> 00:01:21,360
and I hover over our dueDate,

42
00:01:21,360 --> 00:01:23,640
you'll see it as a string or a Date.

43
00:01:23,640 --> 00:01:26,220
Now what I can do if I want to
do some type of modification,

44
00:01:26,220 --> 00:01:28,590
like I want to add seven days to this date

45
00:01:28,590 --> 00:01:29,910
or something like that,

46
00:01:29,910 --> 00:01:31,650
well, if I tried to do that normally,

47
00:01:31,650 --> 00:01:34,230
like I tried to access my Todo.dueDate,

48
00:01:34,230 --> 00:01:36,600
and then I tried to like get
the days on this or something

49
00:01:36,600 --> 00:01:37,800
that you can do on a Date,

50
00:01:37,800 --> 00:01:38,850
you can see this isn't working

51
00:01:38,850 --> 00:01:41,280
'cause a string doesn't
have these methods.

52
00:01:41,280 --> 00:01:42,180
So what I first wanna do

53
00:01:42,180 --> 00:01:45,300
is I wanna check to see,
hey, is this thing a string?

54
00:01:45,300 --> 00:01:47,017
So if my Todo.dueDate,

55
00:01:48,130 --> 00:01:52,800
if the typeof this is equal to a string,

56
00:01:52,800 --> 00:01:54,120
well then I'm going to do something else

57
00:01:54,120 --> 00:01:55,110
inside of my code here.

58
00:01:55,110 --> 00:01:57,330
And if I just move my
console.log up into here first

59
00:01:57,330 --> 00:01:59,400
and I hover over dueDate,
you'll now see the type of this

60
00:01:59,400 --> 00:02:01,320
has actually changed to string.

61
00:02:01,320 --> 00:02:03,210
And that's because
TypeScript is smart enough

62
00:02:03,210 --> 00:02:05,137
to look at your JavaScript
code and it says,

63
00:02:05,137 --> 00:02:06,660
"Hey, I have checked to see

64
00:02:06,660 --> 00:02:08,400
if the type of this thing is a string.

65
00:02:08,400 --> 00:02:10,500
And if that's true, well,
it means, obviously,

66
00:02:10,500 --> 00:02:12,680
my dueDate is a string at this point."

67
00:02:12,680 --> 00:02:15,390
So it's going to change that
type for you automatically

68
00:02:15,390 --> 00:02:16,410
to a string.

69
00:02:16,410 --> 00:02:18,540
So now, if I try to do something on this,

70
00:02:18,540 --> 00:02:20,010
for example, you can
say I have autocomplete

71
00:02:20,010 --> 00:02:21,840
for all the different
string methods out there,

72
00:02:21,840 --> 00:02:23,370
which is really great.

73
00:02:23,370 --> 00:02:26,040
If I were to come in here with
an else statement real quick,

74
00:02:26,040 --> 00:02:28,770
and I just move my
console.log down here instead,

75
00:02:28,770 --> 00:02:31,320
you'll now see that when I
hover over it in the else,

76
00:02:31,320 --> 00:02:33,570
you can see that this
dueDate has a Date type.

77
00:02:33,570 --> 00:02:34,920
And if I try to do here,

78
00:02:34,920 --> 00:02:37,260
you can see I get all of the
different Date autocomplete.

79
00:02:37,260 --> 00:02:38,550
For example, I could get like the Date

80
00:02:38,550 --> 00:02:39,960
or something like that.

81
00:02:39,960 --> 00:02:41,130
So when it comes to checking types,

82
00:02:41,130 --> 00:02:42,300
probably one of the most common things

83
00:02:42,300 --> 00:02:44,490
you're gonna do is you're gonna
have some if else statements

84
00:02:44,490 --> 00:02:47,370
or different control flows
that use this type of keyword

85
00:02:47,370 --> 00:02:48,930
which is built into JavaScript

86
00:02:48,930 --> 00:02:50,430
to figure out what the
type of something is

87
00:02:50,430 --> 00:02:51,780
to narrow down these types

88
00:02:51,780 --> 00:02:54,600
where there's multiple different
types something could be.

89
00:02:54,600 --> 00:02:56,010
Another thing that's really common

90
00:02:56,010 --> 00:02:58,530
is using the instanceof keyword instead.

91
00:02:58,530 --> 00:03:00,810
For example, I cannot check
for Date inside of here.

92
00:03:00,810 --> 00:03:02,220
You can see that this only allows me

93
00:03:02,220 --> 00:03:03,240
to check primitive types,

94
00:03:03,240 --> 00:03:05,160
such as booleans, functions, numbers.

95
00:03:05,160 --> 00:03:07,050
It doesn't allow me to check
for something like Date

96
00:03:07,050 --> 00:03:09,000
because that's not a primitive type.

97
00:03:09,000 --> 00:03:10,050
So instead what I need to do,

98
00:03:10,050 --> 00:03:12,150
if I wanna check to see if this is a Date,

99
00:03:12,150 --> 00:03:14,100
I would want to replace
my equal signs here

100
00:03:14,100 --> 00:03:15,690
with the keyword instanceof,

101
00:03:15,690 --> 00:03:17,850
and then I would pass it
essentially the name of a class

102
00:03:17,850 --> 00:03:19,110
or like object type.

103
00:03:19,110 --> 00:03:22,020
But in my case, Date is
a particular object class

104
00:03:22,020 --> 00:03:23,400
that this can be something of.

105
00:03:23,400 --> 00:03:26,190
So now if I move my dueDate up into here

106
00:03:26,190 --> 00:03:27,023
and I hover over this,

107
00:03:27,023 --> 00:03:28,950
you can see that this now is the Date type

108
00:03:28,950 --> 00:03:30,780
because I'm checking to
see if it is an instance

109
00:03:30,780 --> 00:03:32,010
of a Date object.

110
00:03:32,010 --> 00:03:33,120
And if it is a Date object,

111
00:03:33,120 --> 00:03:35,250
well, now we know the
type of this is a Date.

112
00:03:35,250 --> 00:03:37,080
And if I were to put a
console.log down in the else,

113
00:03:37,080 --> 00:03:39,000
you'll see that this version
right here is a string

114
00:03:39,000 --> 00:03:41,370
because it knows if it's not a Date

115
00:03:41,370 --> 00:03:42,270
then it must be a string.

116
00:03:42,270 --> 00:03:44,010
That's my only other option.

117
00:03:44,010 --> 00:03:45,960
If I were to add other things
into here, like number,

118
00:03:45,960 --> 00:03:47,880
you'll see now down here that this dueDate

119
00:03:47,880 --> 00:03:49,380
could be a string or a number

120
00:03:49,380 --> 00:03:50,790
'cause it could be
either one of the things

121
00:03:50,790 --> 00:03:51,900
that aren't Date.

122
00:03:51,900 --> 00:03:53,670
While up here, it still can only be a Date

123
00:03:53,670 --> 00:03:56,040
'cause we've checked explicitly
to make sure it's a Date.

124
00:03:56,040 --> 00:03:57,690
Now, this may sound kind of confusing,

125
00:03:57,690 --> 00:03:59,030
but the way TypeScript handle all this

126
00:03:59,030 --> 00:04:00,840
is actually relatively intuitive.

127
00:04:00,840 --> 00:04:02,700
Essentially, just look
at your JavaScript code,

128
00:04:02,700 --> 00:04:05,460
and if your JavaScript code is
saying this thing is a Date,

129
00:04:05,460 --> 00:04:07,200
well, then TypeScript will
know that it's a Date.

130
00:04:07,200 --> 00:04:09,840
And if it's saying this
thing is anything but a Date,

131
00:04:09,840 --> 00:04:12,060
it's going to follow that
control flow for you.

132
00:04:12,060 --> 00:04:14,340
So I could come and here
with another else if,

133
00:04:14,340 --> 00:04:17,190
and I could say if the Todo.dueDate,

134
00:04:17,190 --> 00:04:19,920
if the type of it is, let's say,

135
00:04:19,920 --> 00:04:22,560
equal to a number this time,

136
00:04:22,560 --> 00:04:25,230
now, you can see that my
dueDate here is a number.

137
00:04:25,230 --> 00:04:27,090
And if I come in with a final else,

138
00:04:27,090 --> 00:04:28,950
I just copy down this exact same log.

139
00:04:28,950 --> 00:04:30,510
You can see that it's now a string

140
00:04:30,510 --> 00:04:32,130
in this particular scenario.

141
00:04:32,130 --> 00:04:33,450
Now, speaking of how TypeScript

142
00:04:33,450 --> 00:04:36,300
is smart enough to handle all
this fancy control flow stuff,

143
00:04:36,300 --> 00:04:38,340
let's bring this back
to just Date or string

144
00:04:38,340 --> 00:04:39,630
and I'm gonna really simplify our code.

145
00:04:39,630 --> 00:04:41,100
I'm gonna remove everything but this check

146
00:04:41,100 --> 00:04:42,210
to see if it's a Date.

147
00:04:42,210 --> 00:04:43,890
And instead of doing a console.log here,

148
00:04:43,890 --> 00:04:46,680
let's just say I have some
code that does something.

149
00:04:46,680 --> 00:04:48,900
This is gonna be like extending
my Todo or whatever it is,

150
00:04:48,900 --> 00:04:50,490
and then I'm just gonna
have the return keyword.

151
00:04:50,490 --> 00:04:52,710
So my function is ending right here.

152
00:04:52,710 --> 00:04:53,700
And then down here,

153
00:04:53,700 --> 00:04:57,750
let's say I want to console.log
out my Todo.dueDate again.

154
00:04:57,750 --> 00:04:59,850
What do you think the type
of it's going to be here?

155
00:04:59,850 --> 00:05:02,160
Well, TypeScript's smart enough
to know that if it's a Date,

156
00:05:02,160 --> 00:05:04,260
it went through this
code block and returned,

157
00:05:04,260 --> 00:05:06,000
which means that it's impossible

158
00:05:06,000 --> 00:05:07,410
for it to be a Date down here.

159
00:05:07,410 --> 00:05:10,140
So when we hover, you can see
that this is only possible

160
00:05:10,140 --> 00:05:12,180
to be a string at this point.

161
00:05:12,180 --> 00:05:14,670
So again, TypeScript is just
following the control flow

162
00:05:14,670 --> 00:05:15,577
of your code and saying,

163
00:05:15,577 --> 00:05:17,670
"Okay, all the dates are
going to follow this path,

164
00:05:17,670 --> 00:05:20,400
which means it's impossible
for it to be Date after that,

165
00:05:20,400 --> 00:05:22,260
which means it's going to
be the only other option,

166
00:05:22,260 --> 00:05:23,940
which in our case is a string."

167
00:05:23,940 --> 00:05:24,810
This is really powerful

168
00:05:24,810 --> 00:05:26,610
and it makes handling all
these different type things

169
00:05:26,610 --> 00:05:27,480
so much easier,

170
00:05:27,480 --> 00:05:29,730
especially when you have
multiple different types.

171
00:05:29,730 --> 00:05:31,140
For example, a really common scenario

172
00:05:31,140 --> 00:05:33,510
is when you have an optional
type, like a description.

173
00:05:33,510 --> 00:05:35,940
For example, if I just
take my Todo.description

174
00:05:35,940 --> 00:05:37,650
and I try to get the length of that,

175
00:05:37,650 --> 00:05:39,450
well, I'm gonna get a bunch of errors

176
00:05:39,450 --> 00:05:41,700
because this does not actually
have a length property

177
00:05:41,700 --> 00:05:43,020
because it could be undefined.

178
00:05:43,020 --> 00:05:44,430
A string has a length property,

179
00:05:44,430 --> 00:05:47,550
but a description that's
undefined has no length property.

180
00:05:47,550 --> 00:05:49,320
So I need to check to
see if it's undefined

181
00:05:49,320 --> 00:05:50,520
before I do anything.

182
00:05:50,520 --> 00:05:52,500
I could use the same if check where I say

183
00:05:52,500 --> 00:05:57,500
like if the Todo.description
!== undefined,

184
00:05:57,600 --> 00:05:58,710
then I can run this code.

185
00:05:58,710 --> 00:06:00,321
And as you can see, I no
longer get any errors.

186
00:06:00,321 --> 00:06:03,510
I could even just say this
simple if check right here,

187
00:06:03,510 --> 00:06:04,380
'cause this is gonna make sure

188
00:06:04,380 --> 00:06:07,710
that anything null or
undefined is removed from it,

189
00:06:07,710 --> 00:06:09,090
what I could do is even simpler

190
00:06:09,090 --> 00:06:11,310
is I could just use this
optional chaining syntax

191
00:06:11,310 --> 00:06:12,780
inside of JavaScript.

192
00:06:12,780 --> 00:06:14,910
What this is saying is
if this thing is null,

193
00:06:14,910 --> 00:06:15,743
just return null.

194
00:06:15,743 --> 00:06:16,576
Same thing with undefined.

195
00:06:16,576 --> 00:06:18,840
If it's null or undefined,
return null or undefined.

196
00:06:18,840 --> 00:06:20,730
Otherwise, run the code afterwards.

197
00:06:20,730 --> 00:06:22,140
So if the description is undefined,

198
00:06:22,140 --> 00:06:24,240
it means that all the code
after the question mark

199
00:06:24,240 --> 00:06:25,770
doesn't exist at all.

200
00:06:25,770 --> 00:06:28,530
But if it is something
that's not null or undefined,

201
00:06:28,530 --> 00:06:29,580
for example, it's a string,

202
00:06:29,580 --> 00:06:31,350
then it's going to run all
of this code afterwards.

203
00:06:31,350 --> 00:06:34,110
So this is a great way to
essentially narrow down your types

204
00:06:34,110 --> 00:06:35,730
without having to do a
bunch of if else checks

205
00:06:35,730 --> 00:06:37,680
because it's just doing this
one question mark syntax

206
00:06:37,680 --> 00:06:39,330
that handles all of that for you.

207
00:06:39,330 --> 00:06:40,893
If you have null or
undefined in your code,

208
00:06:40,893 --> 00:06:43,320
this is a really common
way to check for that.

209
00:06:43,320 --> 00:06:45,270
Now, sometimes when you're
dealing with null or undefined,

210
00:06:45,270 --> 00:06:46,260
you may not want to have

211
00:06:46,260 --> 00:06:48,090
all these optional checks everywhere.

212
00:06:48,090 --> 00:06:50,310
For example, let's just write
some more code down here.

213
00:06:50,310 --> 00:06:53,580
We're gonna get a form by
saying document.querySelector,

214
00:06:53,580 --> 00:06:55,290
and we're gonna get some like form element

215
00:06:55,290 --> 00:06:56,610
or something like that.

216
00:06:56,610 --> 00:06:58,770
And now I wanna add an
event listener to this.

217
00:06:58,770 --> 00:06:59,610
Let's just say we're gonna add

218
00:06:59,610 --> 00:07:01,650
a submit event listener to it,

219
00:07:01,650 --> 00:07:03,240
gonna take in a function
that does nothing,

220
00:07:03,240 --> 00:07:04,890
just so we can see what
the code looks like.

221
00:07:04,890 --> 00:07:06,690
You noticed automatically as I was typing,

222
00:07:06,690 --> 00:07:08,820
TypeScript added this
question mark in there for me

223
00:07:08,820 --> 00:07:11,370
because essentially,
when I'm query selecting,

224
00:07:11,370 --> 00:07:14,040
this could be an element
or it could be null.

225
00:07:14,040 --> 00:07:16,410
And I could specifically say,
since I know this is a form,

226
00:07:16,410 --> 00:07:19,230
I could say that it's going
to be an HTML form element.

227
00:07:19,230 --> 00:07:21,960
So this could be an HTML form
element or it could be null

228
00:07:21,960 --> 00:07:23,850
because it could try to query my document

229
00:07:23,850 --> 00:07:25,890
and not actually find this element.

230
00:07:25,890 --> 00:07:26,723
Now, most often,

231
00:07:26,723 --> 00:07:28,320
you probably want to
leave this check in there

232
00:07:28,320 --> 00:07:29,850
because, obviously, for some reason

233
00:07:29,850 --> 00:07:31,110
your form's not on the page,

234
00:07:31,110 --> 00:07:32,280
you don't want your code to error out,

235
00:07:32,280 --> 00:07:33,960
you just wanna skip this section.

236
00:07:33,960 --> 00:07:35,970
But maybe you know better than TypeScript

237
00:07:35,970 --> 00:07:39,600
and you know for 100% fact
that this document element

238
00:07:39,600 --> 00:07:41,520
for the form is always going to be there.

239
00:07:41,520 --> 00:07:43,260
You know it's never gonna be null.

240
00:07:43,260 --> 00:07:44,093
Well, what you can do

241
00:07:44,093 --> 00:07:45,570
is instead of putting
a question mark here,

242
00:07:45,570 --> 00:07:47,010
you can put an exclamation point,

243
00:07:47,010 --> 00:07:48,540
and that essentially tells TypeScript

244
00:07:48,540 --> 00:07:51,000
it's impossible for this thing to be null.

245
00:07:51,000 --> 00:07:52,680
So this is not anything with JavaScript,

246
00:07:52,680 --> 00:07:54,420
this is only going to
be a TypeScript feature.

247
00:07:54,420 --> 00:07:55,500
When you compile your code,

248
00:07:55,500 --> 00:07:57,990
it's essentially just gonna
remove this exclamation point,

249
00:07:57,990 --> 00:07:59,280
but that just tells TypeScript,

250
00:07:59,280 --> 00:08:01,320
it is impossible for
this thing to be null.

251
00:08:01,320 --> 00:08:02,370
So it doesn't give you an error

252
00:08:02,370 --> 00:08:04,080
when you try to access things on it.

253
00:08:04,080 --> 00:08:05,700
You can put this question
mark anywhere you want.

254
00:08:05,700 --> 00:08:07,080
For example, I can put it at the end

255
00:08:07,080 --> 00:08:08,610
of this query statement right here.

256
00:08:08,610 --> 00:08:10,230
And now, I'm telling TypeScript

257
00:08:10,230 --> 00:08:13,050
that the return value from
this is never going to be null.

258
00:08:13,050 --> 00:08:14,310
So when we hover over our form,

259
00:08:14,310 --> 00:08:16,890
you can see it is no longer null at all.

260
00:08:16,890 --> 00:08:18,187
Now this may seem great and you may think,

261
00:08:18,187 --> 00:08:19,920
"I'm gonna put this
everywhere that I have null

262
00:08:19,920 --> 00:08:21,060
that I have to deal with."

263
00:08:21,060 --> 00:08:21,893
But in reality,

264
00:08:21,893 --> 00:08:24,390
you probably shouldn't use
this exclamation mark syntax

265
00:08:24,390 --> 00:08:25,620
very much at all.

266
00:08:25,620 --> 00:08:26,670
The reason for that

267
00:08:26,670 --> 00:08:28,440
is because it kind of
overrides TypeScript,

268
00:08:28,440 --> 00:08:30,540
just like how I talked
about any is a bad idea

269
00:08:30,540 --> 00:08:31,830
since it overrides TypeScript

270
00:08:31,830 --> 00:08:33,660
and kind of brings you back to JavaScript.

271
00:08:33,660 --> 00:08:35,070
Doing this exclamation point

272
00:08:35,070 --> 00:08:36,750
essentially removes all of your checking

273
00:08:36,750 --> 00:08:38,200
when it comes to null or undefined.

274
00:08:38,200 --> 00:08:40,230
So if you have a value that doesn't exist

275
00:08:40,230 --> 00:08:42,000
and you put this exclamation mark there,

276
00:08:42,000 --> 00:08:43,860
TypeScripts not going to
know it doesn't exist.

277
00:08:43,860 --> 00:08:44,693
So it doesn't give you

278
00:08:44,693 --> 00:08:46,650
all the same error
checking you want to have.

279
00:08:46,650 --> 00:08:48,300
Now, of course, there
are some niche scenarios

280
00:08:48,300 --> 00:08:50,220
where this is really
useful to put in there,

281
00:08:50,220 --> 00:08:51,150
but for the most part,

282
00:08:51,150 --> 00:08:52,950
if you have something that could be null,

283
00:08:52,950 --> 00:08:54,090
it's better just to leave it

284
00:08:54,090 --> 00:08:55,410
as something that could be be null,

285
00:08:55,410 --> 00:08:58,710
unless you are 100% sure
it's impossible to be null.

286
00:08:58,710 --> 00:09:00,180
And one common scenario for that

287
00:09:00,180 --> 00:09:02,670
is when you're doing things
like querySelector statements.

288
00:09:02,670 --> 00:09:03,810
Now, kind of one of the final things

289
00:09:03,810 --> 00:09:05,580
I wanna talk about when
it comes to control flow

290
00:09:05,580 --> 00:09:07,200
that's really common
you'll see in TypeScript

291
00:09:07,200 --> 00:09:09,750
is using switch statements
to narrow down your types.

292
00:09:09,750 --> 00:09:10,650
For example, this priority

293
00:09:10,650 --> 00:09:12,450
can be either High, Normal, or Low.

294
00:09:12,450 --> 00:09:14,220
So we can narrow down
the actual type of it

295
00:09:14,220 --> 00:09:15,660
using something like a switch statement.

296
00:09:15,660 --> 00:09:16,920
We can do the same with an if statement,

297
00:09:16,920 --> 00:09:18,660
but it's really common to
do with a switch statement

298
00:09:18,660 --> 00:09:20,220
when you have something like that.

299
00:09:20,220 --> 00:09:22,477
So here is our priority.

300
00:09:22,477 --> 00:09:24,030
There we go.

301
00:09:24,030 --> 00:09:25,684
And let's say we have a case here

302
00:09:25,684 --> 00:09:26,550
where the priority is gonna be High.

303
00:09:26,550 --> 00:09:28,470
You can see our auto
automatically get autocomplete,

304
00:09:28,470 --> 00:09:29,310
which is really nice.

305
00:09:29,310 --> 00:09:32,910
I can console.log my Todo.priority.

306
00:09:32,910 --> 00:09:33,743
There we go.

307
00:09:33,743 --> 00:09:34,890
And if I hover over the type for this,

308
00:09:34,890 --> 00:09:36,540
you can see the type is being hard coded

309
00:09:36,540 --> 00:09:37,920
to the literal value of High

310
00:09:37,920 --> 00:09:39,960
'cause it knows when I'm
inside this case statement,

311
00:09:39,960 --> 00:09:42,327
it's obviously going to be the High type.

312
00:09:42,327 --> 00:09:43,377
Now if I break outta that

313
00:09:43,377 --> 00:09:44,670
and I come in with a new case,

314
00:09:44,670 --> 00:09:46,740
you can see I only have
two more options left.

315
00:09:46,740 --> 00:09:49,310
As you can see here, Normal
is now my next option.

316
00:09:49,310 --> 00:09:52,410
So if I do a quick console.log
here and we break outta that,

317
00:09:52,410 --> 00:09:53,490
you can see when I hover here,

318
00:09:53,490 --> 00:09:55,170
this has a priority of Normal.

319
00:09:55,170 --> 00:09:57,453
Now, if I just copy
this down one more time,

320
00:09:58,440 --> 00:09:59,970
we'll see that we have our Low priority

321
00:09:59,970 --> 00:10:01,650
as the last option we can add in here.

322
00:10:01,650 --> 00:10:03,510
And you can see the priority here is Low.

323
00:10:03,510 --> 00:10:05,010
If I try to add in another case,

324
00:10:05,010 --> 00:10:07,080
you'll notice I have no
more autocomplete options,

325
00:10:07,080 --> 00:10:10,020
and that's just because
there are no more cases left.

326
00:10:10,020 --> 00:10:12,330
I've already used all my different cases.

327
00:10:12,330 --> 00:10:14,520
This is a really great way to
check all your different cases

328
00:10:14,520 --> 00:10:15,780
and narrow down different types

329
00:10:15,780 --> 00:10:17,370
based on different things in your code.

330
00:10:17,370 --> 00:10:18,810
It's something really
common that you'll see

331
00:10:18,810 --> 00:10:21,090
when you're dealing with
unions, for example.

332
00:10:21,090 --> 00:10:23,310
This is actually something
that's really commonly used

333
00:10:23,310 --> 00:10:25,560
for something called an
exhaustive switch statement,

334
00:10:25,560 --> 00:10:27,240
which is what I'm gonna
cover in the next video

335
00:10:27,240 --> 00:10:29,673
because it rolls perfectly
into the never type.