1
00:00:00,330 --> 00:00:01,710
- Now we've already talked about how

2
00:00:01,710 --> 00:00:04,200
when you use let to define
a variable in TypeScript

3
00:00:04,200 --> 00:00:06,720
it's going to give you a
generic type essentially number

4
00:00:06,720 --> 00:00:08,910
because it could be any number
since I can redefine it.

5
00:00:08,910 --> 00:00:11,040
Well, if you use constant
with a primitive value,

6
00:00:11,040 --> 00:00:13,290
it's going to give you that
hard-coded literal value.

7
00:00:13,290 --> 00:00:14,550
So B is just one.

8
00:00:14,550 --> 00:00:16,860
That is the only thing it can ever be.

9
00:00:16,860 --> 00:00:18,240
Well, the way that this works is

10
00:00:18,240 --> 00:00:20,640
when you define a constant primitive value

11
00:00:20,640 --> 00:00:23,190
essentially what TypeScript
is doing is it's adding this

12
00:00:23,190 --> 00:00:26,070
as const keyword at the end of your value.

13
00:00:26,070 --> 00:00:27,660
And that's just telling TypeScript

14
00:00:27,660 --> 00:00:30,630
that this is a constant
value that never changes.

15
00:00:30,630 --> 00:00:33,180
And if I do that to my
Let Variable up here,

16
00:00:33,180 --> 00:00:35,160
what happens is if I
hover over this A type,

17
00:00:35,160 --> 00:00:37,140
you can see it is set to one.

18
00:00:37,140 --> 00:00:38,850
And that's because it's changing my type.

19
00:00:38,850 --> 00:00:41,730
I'm saying this is a constant
variable that never changes

20
00:00:41,730 --> 00:00:44,460
and one is a primitive, so it's
just always going to be one.

21
00:00:44,460 --> 00:00:46,650
And that means if I try to redefine A,

22
00:00:46,650 --> 00:00:48,030
it's actually going to throw me an error.

23
00:00:48,030 --> 00:00:49,620
If I just come in here, redefine it.

24
00:00:49,620 --> 00:00:51,150
You can see it's saying, Hey

25
00:00:51,150 --> 00:00:54,450
this string SDF is not
assignable to the type of one.

26
00:00:54,450 --> 00:00:56,010
And no matter what I try to set this to

27
00:00:56,010 --> 00:00:58,080
as long as it's not one,
one will obviously work.

28
00:00:58,080 --> 00:01:00,030
But if I try to set it to any other value,

29
00:01:00,030 --> 00:01:01,950
you're seeing that I'm going
to be getting an error.

30
00:01:01,950 --> 00:01:02,783
And that's because this

31
00:01:02,783 --> 00:01:04,290
as constant is essentially converting this

32
00:01:04,290 --> 00:01:06,600
over and saying this
is a constant variable.

33
00:01:06,600 --> 00:01:08,520
Now I would never write
code that looks like this

34
00:01:08,520 --> 00:01:11,040
because I should just use
the const keyword instead.

35
00:01:11,040 --> 00:01:12,840
But where this becomes
really powerful is when

36
00:01:12,840 --> 00:01:15,300
you need to use it with
objects and arrays.

37
00:01:15,300 --> 00:01:16,133
Let's coming here

38
00:01:16,133 --> 00:01:17,190
and let's just create an array here.

39
00:01:17,190 --> 00:01:18,630
We'll say numbs

40
00:01:18,630 --> 00:01:20,340
and that's just gonna
be one, two, and three.

41
00:01:20,340 --> 00:01:21,780
Actually, let's make this a string so

42
00:01:21,780 --> 00:01:23,640
it's a little bit easier
to see what's happening.

43
00:01:23,640 --> 00:01:25,320
So we'll say we have a string of one,

44
00:01:25,320 --> 00:01:28,230
string of two and a string of three.

45
00:01:28,230 --> 00:01:29,160
Now if I hover over this,

46
00:01:29,160 --> 00:01:31,110
you can see that I get a string array.

47
00:01:31,110 --> 00:01:33,480
And if I want to make this an as const,

48
00:01:33,480 --> 00:01:35,010
you're gonna see something
really interesting

49
00:01:35,010 --> 00:01:36,270
when I change this as const,

50
00:01:36,270 --> 00:01:38,190
you see that I'm getting a read only array

51
00:01:38,190 --> 00:01:39,510
which we've already
talked about a little bit.

52
00:01:39,510 --> 00:01:41,640
I can't add or change
anything inside of it.

53
00:01:41,640 --> 00:01:42,600
But you're noticing I'm not getting

54
00:01:42,600 --> 00:01:44,040
a read only array of numbers,

55
00:01:44,040 --> 00:01:46,530
I'm getting an read only
array of the string one,

56
00:01:46,530 --> 00:01:48,450
the string two, and the string three.

57
00:01:48,450 --> 00:01:50,790
So that means it only has
three specific values.

58
00:01:50,790 --> 00:01:53,250
And if I were to access,
for example, index zero

59
00:01:53,250 --> 00:01:54,870
and I just set that to a variable,

60
00:01:54,870 --> 00:01:56,010
you'll notice when I hover over this,

61
00:01:56,010 --> 00:01:59,220
this actually has a
hard coded value of one.

62
00:01:59,220 --> 00:02:01,050
And the reason for that is my array knows

63
00:02:01,050 --> 00:02:03,810
that it is 1, 2, 3, those three strings.

64
00:02:03,810 --> 00:02:05,190
So if I access the first property,

65
00:02:05,190 --> 00:02:07,410
it knows it's always going
to be the string of one

66
00:02:07,410 --> 00:02:09,780
which is why this can
have that type of one.

67
00:02:09,780 --> 00:02:12,030
And if I try to modify it or
change anything, for example

68
00:02:12,030 --> 00:02:13,920
I try to change this to something else,

69
00:02:13,920 --> 00:02:15,480
you're gonna see that I'm
going to get an error.

70
00:02:15,480 --> 00:02:17,220
Or if I try to push
something to the array,

71
00:02:17,220 --> 00:02:18,450
you can see I'm gonna get an error

72
00:02:18,450 --> 00:02:20,250
because that push property doesn't exist.

73
00:02:20,250 --> 00:02:22,050
It does all the same things as read only

74
00:02:22,050 --> 00:02:24,747
but it also converts this
array to a literal type.

75
00:02:24,747 --> 00:02:26,430
And the reason this is really useful is

76
00:02:26,430 --> 00:02:28,260
if you want to construct enums

77
00:02:28,260 --> 00:02:29,730
and enum is essentially a way to map

78
00:02:29,730 --> 00:02:30,990
between one value and another.

79
00:02:30,990 --> 00:02:32,850
It gives you like some
constant values you can use.

80
00:02:32,850 --> 00:02:34,560
It's really good with like statuses.

81
00:02:34,560 --> 00:02:36,660
So back in the example
where we had our statuses

82
00:02:36,660 --> 00:02:41,010
we can have that person type,
we can say type person equals

83
00:02:41,010 --> 00:02:43,410
and for now I'm just gonna
give them a skill level.

84
00:02:43,410 --> 00:02:48,410
So we're gonna have beginner,
intermediate, and expert.

85
00:02:50,220 --> 00:02:51,060
There we go.

86
00:02:51,060 --> 00:02:52,200
So this is a super common thing

87
00:02:52,200 --> 00:02:53,550
that you're going to want to do.

88
00:02:53,550 --> 00:02:54,840
But what happens if you want to loop

89
00:02:54,840 --> 00:02:56,100
through all your skill levels?

90
00:02:56,100 --> 00:02:57,300
For example, I wanna come down here

91
00:02:57,300 --> 00:03:00,934
and I wanna say like skill
levels, do four each.

92
00:03:00,934 --> 00:03:03,690
And for each skill level,
I want to do something.

93
00:03:03,690 --> 00:03:05,613
We'll just say console.log it for now.

94
00:03:06,570 --> 00:03:08,100
Well, how do I get these skill levels?

95
00:03:08,100 --> 00:03:10,320
I have no way to get them
in my JavaScript code

96
00:03:10,320 --> 00:03:13,170
because they're only defined
in my TypeScript code.

97
00:03:13,170 --> 00:03:16,200
And TypeScript cannot communicate
with JavaScript at all.

98
00:03:16,200 --> 00:03:18,270
But I don't have any way
to get these skill levels.

99
00:03:18,270 --> 00:03:20,460
This is where that as const
comes in really useful.

100
00:03:20,460 --> 00:03:22,200
'Cause I can create a constant variable.

101
00:03:22,200 --> 00:03:24,000
We're just called this skill levels.

102
00:03:24,000 --> 00:03:26,310
I'm gonna set it to an array
that looks just like this.

103
00:03:26,310 --> 00:03:28,920
So instead of using
this, you know or syntax,

104
00:03:28,920 --> 00:03:30,000
I'm gonna be converting this just

105
00:03:30,000 --> 00:03:32,220
to a normal JavaScript array.

106
00:03:32,220 --> 00:03:33,053
There we go.

107
00:03:33,053 --> 00:03:35,100
So now my skill levels
is an array of strings

108
00:03:35,100 --> 00:03:37,110
but if I set this as a constant,

109
00:03:37,110 --> 00:03:38,670
now you'll see that I have an array that

110
00:03:38,670 --> 00:03:41,670
is either beginner,
intermediate, or expert.

111
00:03:41,670 --> 00:03:43,650
So now I can actually use
this down here to loop

112
00:03:43,650 --> 00:03:44,490
through my skill levels.

113
00:03:44,490 --> 00:03:45,810
And as you can see, it's going to be

114
00:03:45,810 --> 00:03:48,480
either a beginner, an
intermediate or an expert.

115
00:03:48,480 --> 00:03:49,770
So it's going to be working just fine

116
00:03:49,770 --> 00:03:51,090
if I want to loop through them.

117
00:03:51,090 --> 00:03:53,790
But now this skill level
here is duplicated code.

118
00:03:53,790 --> 00:03:54,720
I want to change this.

119
00:03:54,720 --> 00:03:56,910
So it relies on this skill level up here.

120
00:03:56,910 --> 00:03:58,260
Well that's where index types come

121
00:03:58,260 --> 00:03:59,730
in that we talked about earlier.

122
00:03:59,730 --> 00:04:01,080
What I can do is I can take this

123
00:04:01,080 --> 00:04:02,190
and I can say I want to loop

124
00:04:02,190 --> 00:04:04,500
through for every single
number on my skill level

125
00:04:04,500 --> 00:04:06,930
I wanna make sure I do the
type of, so let's just wrap

126
00:04:06,930 --> 00:04:09,960
that in parentheses to be
explicit on what we're doing here.

127
00:04:09,960 --> 00:04:11,730
Now if I give that a safe
and I hover my skill level,

128
00:04:11,730 --> 00:04:13,110
you can see the type has been set back

129
00:04:13,110 --> 00:04:15,360
to beginner or intermediate or expert.

130
00:04:15,360 --> 00:04:16,320
And the reason this works is

131
00:04:16,320 --> 00:04:18,210
I'm getting the type of this variable.

132
00:04:18,210 --> 00:04:19,140
If we hover over here,

133
00:04:19,140 --> 00:04:22,170
it's just a read only array of
these three different things.

134
00:04:22,170 --> 00:04:24,780
And then I'm saying go
through every single index.

135
00:04:24,780 --> 00:04:26,520
That's what this number
property says right here.

136
00:04:26,520 --> 00:04:28,050
Every single numbered index.

137
00:04:28,050 --> 00:04:30,510
So zero, one and two in my array case,

138
00:04:30,510 --> 00:04:31,560
figure out what the value is

139
00:04:31,560 --> 00:04:32,910
and that's gonna be my new type.

140
00:04:32,910 --> 00:04:36,300
So my type is gonna be one of
these three different things.

141
00:04:36,300 --> 00:04:37,560
This is incredibly powerful

142
00:04:37,560 --> 00:04:39,810
because this is the primary
way that you are gonna deal

143
00:04:39,810 --> 00:04:42,570
with and work with enums
inside of TypeScript.

144
00:04:42,570 --> 00:04:45,450
Now, TypeScript has their
own way to create enums

145
00:04:45,450 --> 00:04:47,520
but honestly the TypeScript
team recommends you

146
00:04:47,520 --> 00:04:50,130
don't use them because it's
a little bit harder to work

147
00:04:50,130 --> 00:04:51,840
with them and they don't
really map one-to-one

148
00:04:51,840 --> 00:04:54,090
with JavaScript while
doing this with arrays and

149
00:04:54,090 --> 00:04:56,910
as const is much easier and
much cleaner what's going on

150
00:04:56,910 --> 00:04:59,040
'cause I just have a
normal JavaScript array

151
00:04:59,040 --> 00:05:00,840
and I'm just adding a little
bit of TypeScript magic

152
00:05:00,840 --> 00:05:04,140
on the end to help with my
typings that are going on here.

153
00:05:04,140 --> 00:05:06,750
Now you can also use as
const with objects as well

154
00:05:06,750 --> 00:05:08,160
and it works fairly similar.

155
00:05:08,160 --> 00:05:10,950
So let's just create a person object here.

156
00:05:10,950 --> 00:05:14,940
A name is Kyle, age is gonna be 28.

157
00:05:14,940 --> 00:05:16,110
Let's even go a step further

158
00:05:16,110 --> 00:05:17,520
and we'll nest some stuff inside of it.

159
00:05:17,520 --> 00:05:21,660
So we'll say address and
we're gonna give it a street

160
00:05:21,660 --> 00:05:23,493
which is just Main Street.

161
00:05:25,050 --> 00:05:25,883
There we go.

162
00:05:25,883 --> 00:05:27,330
So I have my person and
you can see the name

163
00:05:27,330 --> 00:05:28,200
is a type of string.

164
00:05:28,200 --> 00:05:30,720
Age is a number, and the
address is a street object

165
00:05:30,720 --> 00:05:32,310
that has a string property.

166
00:05:32,310 --> 00:05:33,840
Now if I set this to as const,

167
00:05:33,840 --> 00:05:35,310
essentially what as const is doing

168
00:05:35,310 --> 00:05:37,050
is it goes through and it
makes every single thing

169
00:05:37,050 --> 00:05:39,030
inside of this read only and it's going

170
00:05:39,030 --> 00:05:41,280
to make it so you can't
make any modifications.

171
00:05:41,280 --> 00:05:43,140
Now if I hover over my
person, you can see all

172
00:05:43,140 --> 00:05:45,480
of my properties have
been set to read only.

173
00:05:45,480 --> 00:05:49,350
And also I cannot add new
properties to this person object.

174
00:05:49,350 --> 00:05:52,890
So if I come down here and
I say person.address.street

175
00:05:52,890 --> 00:05:54,390
and I try to change this, you're gonna see

176
00:05:54,390 --> 00:05:55,710
immediately it's giving
me an error because

177
00:05:55,710 --> 00:05:57,570
this is a constant value
that cannot be changed.

178
00:05:57,570 --> 00:05:58,530
It's read only.

179
00:05:58,530 --> 00:06:00,930
If I try to add like a zip code onto here,

180
00:06:00,930 --> 00:06:02,550
you're gonna notice again,
I'm going to get an error

181
00:06:02,550 --> 00:06:04,110
because that zip code doesn't exist

182
00:06:04,110 --> 00:06:05,640
on this read only type here.

183
00:06:05,640 --> 00:06:07,860
And same thing if I try to
change my age, for example

184
00:06:07,860 --> 00:06:09,060
I try to set this to like two.

185
00:06:09,060 --> 00:06:10,050
You can see I'm getting an error.

186
00:06:10,050 --> 00:06:12,900
While if I remove this as
const, it's working just fine.

187
00:06:12,900 --> 00:06:14,280
So as const is a really great way

188
00:06:14,280 --> 00:06:16,230
for you to take essentially a value

189
00:06:16,230 --> 00:06:18,090
and to make every single
thing inside of it

190
00:06:18,090 --> 00:06:20,280
read only without having
to create a separate type

191
00:06:20,280 --> 00:06:22,113
and marking everything as read only.