1
00:00:00,000 --> 00:00:01,380
- Now the next thing I wanna talk about

2
00:00:01,380 --> 00:00:04,290
is the index type that
allows you to access

3
00:00:04,290 --> 00:00:06,510
the type of properties of other types

4
00:00:06,510 --> 00:00:07,560
that you've already created.

5
00:00:07,560 --> 00:00:10,380
And this works for interfaces
and types exactly the same.

6
00:00:10,380 --> 00:00:12,960
So in this code we have
a person which has a name

7
00:00:12,960 --> 00:00:15,059
and they have a skill level

8
00:00:15,059 --> 00:00:17,100
which is either gonna be
beginner, intermediate, or expert.

9
00:00:17,100 --> 00:00:18,270
And then down here at the very bottom,

10
00:00:18,270 --> 00:00:19,920
we have a function for printing out

11
00:00:19,920 --> 00:00:21,270
this person's skill level.

12
00:00:21,270 --> 00:00:23,040
And this takes in a skin skill level

13
00:00:23,040 --> 00:00:26,160
which can again be beginner,
intermediate, or expert.

14
00:00:26,160 --> 00:00:28,950
All of this code is working
fine with no errors at all

15
00:00:28,950 --> 00:00:30,960
but there's a bit of a problem in the code

16
00:00:30,960 --> 00:00:33,427
and that we're essentially duplicating

17
00:00:33,427 --> 00:00:34,920
this skill level in multiple places.

18
00:00:34,920 --> 00:00:37,300
And the reason why this
is a problem is let's

19
00:00:37,300 --> 00:00:38,910
say we add a new skill
level to our person.

20
00:00:38,910 --> 00:00:40,920
For example, we have
too many expert levels,

21
00:00:40,920 --> 00:00:44,160
we need to distinguish them
between master and expert.

22
00:00:44,160 --> 00:00:45,030
Now I'm getting an error

23
00:00:45,030 --> 00:00:47,890
because this skill level
could be a master type

24
00:00:49,006 --> 00:00:50,070
which is not assignable to this beginner,

25
00:00:50,070 --> 00:00:51,300
intermediate, and expert.

26
00:00:51,300 --> 00:00:53,827
Essentially I have two
things that are dependent

27
00:00:53,827 --> 00:00:55,260
on one another, and when I change one

28
00:00:55,260 --> 00:00:56,760
I now need to go down here

29
00:00:56,760 --> 00:00:59,370
and change this other one as
well for it to actually work.

30
00:00:59,370 --> 00:01:01,410
And that's not super ideal.

31
00:01:01,410 --> 00:01:03,240
So instead I would like
to couple them together

32
00:01:03,240 --> 00:01:05,340
so that anytime I change this skill level

33
00:01:05,340 --> 00:01:07,410
it's going to update down here as well.

34
00:01:07,410 --> 00:01:09,150
There's two main ways
that I could do this,

35
00:01:09,150 --> 00:01:11,190
the first is I could just
create a brand new type

36
00:01:11,190 --> 00:01:12,360
for my skill level.

37
00:01:12,360 --> 00:01:17,280
So I could just say type,
skill level is equal to,

38
00:01:17,280 --> 00:01:19,629
and I could just set it equal
to this value right here.

39
00:01:19,629 --> 00:01:21,870
There we go.

40
00:01:21,870 --> 00:01:24,280
I could just move that to
the very top of my code

41
00:01:24,280 --> 00:01:26,710
and then I could down here say that this

42
00:01:27,690 --> 00:01:29,090
is going to be a skill level

43
00:01:29,987 --> 00:01:30,990
and this is going to be a skill level.

44
00:01:30,990 --> 00:01:32,910
And now if I make changes up here

45
00:01:32,910 --> 00:01:34,890
doesn't matter what I
do one way or the other

46
00:01:34,890 --> 00:01:36,990
those are two things
that are linked together.

47
00:01:36,990 --> 00:01:38,400
This works perfectly fine,

48
00:01:38,400 --> 00:01:40,380
but let's say that I
didn't want to do that.

49
00:01:40,380 --> 00:01:41,580
There's another alternative,

50
00:01:41,580 --> 00:01:42,720
so let's just bring our code back

51
00:01:42,720 --> 00:01:44,392
to what we had before

52
00:01:44,392 --> 00:01:46,170
where we didn't have this
separated into another type.

53
00:01:46,170 --> 00:01:47,003
There we go.

54
00:01:47,003 --> 00:01:49,080
And now we're getting our
error just like before.

55
00:01:49,080 --> 00:01:51,150
Instead, what I can do where
I'm defining this type,

56
00:01:51,150 --> 00:01:53,970
I know that this specifically
needs to be whatever type

57
00:01:53,970 --> 00:01:56,160
the skill level of my person is.

58
00:01:56,160 --> 00:01:58,050
So I can say I want to get my person type

59
00:01:58,050 --> 00:02:00,030
and then I can actually put inside of here

60
00:02:00,030 --> 00:02:01,890
the actual property I want to get.

61
00:02:01,890 --> 00:02:04,160
So I want to get the skill level property.

62
00:02:04,160 --> 00:02:06,270
So now this skill level is going to be,

63
00:02:06,270 --> 00:02:07,890
as you can see when I hover beginner,

64
00:02:07,890 --> 00:02:09,570
intermediate, expert or master.

65
00:02:09,570 --> 00:02:11,280
And if I make a change up here

66
00:02:11,280 --> 00:02:12,780
and I come back down to this skill level,

67
00:02:12,780 --> 00:02:14,280
you can see it reflects perfectly

68
00:02:14,280 --> 00:02:17,130
all the changes that I make
because they're linked together.

69
00:02:17,130 --> 00:02:19,470
So by accessing, using the index value

70
00:02:19,470 --> 00:02:21,360
just like you would
access inside of an object

71
00:02:21,360 --> 00:02:22,500
a specific property

72
00:02:22,500 --> 00:02:24,240
it works the exact same way in TypeScript.

73
00:02:24,240 --> 00:02:25,680
I'm saying I wanna get the type

74
00:02:25,680 --> 00:02:28,740
of the skill level property
for my person type,

75
00:02:28,740 --> 00:02:30,720
and that's exactly what
it's getting for me.

76
00:02:30,720 --> 00:02:32,430
So this is one way that
you can link together

77
00:02:32,430 --> 00:02:33,720
these things and it's really useful

78
00:02:33,720 --> 00:02:35,880
for when you want to essentially
link together a property

79
00:02:35,880 --> 00:02:38,310
of a type with something else in your code

80
00:02:38,310 --> 00:02:40,493
like a function argument
or another variable.

81
00:02:40,493 --> 00:02:42,799
Now this can even be taken a step further,

82
00:02:42,799 --> 00:02:45,480
imagine we wanted to
write a group by function

83
00:02:45,480 --> 00:02:47,940
where we're grouping these
people by skill level,

84
00:02:47,940 --> 00:02:50,430
but we would end up with some
object that looks something

85
00:02:50,430 --> 00:02:51,990
like this where we would
have a skill level,

86
00:02:51,990 --> 00:02:54,780
for example, beginner, and
then we would have an array

87
00:02:54,780 --> 00:02:56,749
of different peoples, like people one,

88
00:02:56,749 --> 00:03:00,720
person two and so on.

89
00:03:00,720 --> 00:03:02,477
And then we would finally come

90
00:03:02,477 --> 00:03:04,110
down here and we'd have
some intermediate level

91
00:03:04,110 --> 00:03:07,110
that would also have some
people inside of it and so on.

92
00:03:07,110 --> 00:03:09,224
How exactly would we create
a type for doing this,

93
00:03:09,224 --> 00:03:12,531
while still maintaining this
skill level inside of here?

94
00:03:12,531 --> 00:03:15,330
Well, to do that we
need to use another way

95
00:03:15,330 --> 00:03:16,710
that you can use the index type

96
00:03:16,710 --> 00:03:18,720
and that's when you're
creating an object type.

97
00:03:18,720 --> 00:03:21,710
So let's create this
person or we'll say people

98
00:03:21,710 --> 00:03:26,070
grouped by skill level.

99
00:03:26,070 --> 00:03:27,629
There we go.

100
00:03:27,629 --> 00:03:29,070
And that's going to equal to
whatever type we wanna create.

101
00:03:29,070 --> 00:03:30,930
And we know that we want to have keys

102
00:03:30,930 --> 00:03:33,150
for each one of our
different skill levels.

103
00:03:33,150 --> 00:03:35,550
So in order to say that we
want to have multiple keys

104
00:03:35,550 --> 00:03:37,800
of a specific type
whether it's number string

105
00:03:37,800 --> 00:03:40,200
or in our case, this skill
level, what we need to

106
00:03:40,200 --> 00:03:43,200
do is you can put these
index brackets inside of here

107
00:03:43,200 --> 00:03:45,113
and then you can put whatever you want.

108
00:03:45,993 --> 00:03:47,336
For example, this is going to be my index

109
00:03:47,336 --> 00:03:48,360
and if I type this as a string,

110
00:03:48,360 --> 00:03:51,133
essentially what I'm saying
is I want to have any

111
00:03:51,133 --> 00:03:53,880
strings at all as my
actual key for my object.

112
00:03:53,880 --> 00:03:55,620
And then I can specify
what I want the value

113
00:03:55,620 --> 00:03:57,900
to be for all of those different indexes.

114
00:03:57,900 --> 00:04:00,390
So any index that is a
string will have a value

115
00:04:00,390 --> 00:04:02,898
which is a person array just like that.

116
00:04:02,898 --> 00:04:06,180
Now this isn't quite going
to solve the problem we want

117
00:04:06,180 --> 00:04:08,520
because it's going to
allow any string at all,

118
00:04:08,520 --> 00:04:11,610
so if I wanted to create
something, we'll just say const A,

119
00:04:11,610 --> 00:04:14,313
is going to have this
specific type right here,

120
00:04:14,313 --> 00:04:16,470
this is gonna be equal to an object,

121
00:04:16,470 --> 00:04:18,000
we'll just get rid of this code down here.

122
00:04:18,000 --> 00:04:21,106
And what I can do is I
can put any string I want,

123
00:04:21,106 --> 00:04:21,953
it doesn't matter, any string I want,

124
00:04:24,355 --> 00:04:25,188
but the value of this string
must be a people array.

125
00:04:25,188 --> 00:04:26,700
So I could do an array
and I could put a person

126
00:04:26,700 --> 00:04:29,460
inside of here which has a name, file,

127
00:04:29,460 --> 00:04:31,645
and then we need to add in a skill level,

128
00:04:31,645 --> 00:04:33,570
there we go.

129
00:04:33,570 --> 00:04:35,000
So if I do that

130
00:04:35,000 --> 00:04:35,833
you can see that this is working fine,

131
00:04:35,833 --> 00:04:37,725
but as soon as I change this to something

132
00:04:37,725 --> 00:04:38,850
that's not a string it's
going to give me an error.

133
00:04:38,850 --> 00:04:40,770
For example, if I made this like a number,

134
00:04:40,770 --> 00:04:43,208
or if I just came up here
and I said, you know what?

135
00:04:43,208 --> 00:04:44,100
Actually my indexes should be numbers.

136
00:04:44,100 --> 00:04:46,050
Now you're seeing I'm getting
error because it's saying

137
00:04:46,050 --> 00:04:48,390
Hey, this must be a number, not a string.

138
00:04:48,390 --> 00:04:50,430
Now if I wanted to use a skill level here,

139
00:04:50,430 --> 00:04:52,616
well what I could do is I
could use my person object here

140
00:04:52,616 --> 00:04:55,208
and I could just use the
index property a second time

141
00:04:55,208 --> 00:04:58,560
to get specifically the
type for that skill level.

142
00:04:58,560 --> 00:05:00,360
Now this still doesn't quite get us there,

143
00:05:00,360 --> 00:05:02,130
if we hover over the air,
essentially it's saying

144
00:05:02,130 --> 00:05:03,827
that an index signature cannot be

145
00:05:03,827 --> 00:05:05,720
a literal type or a generic type

146
00:05:05,720 --> 00:05:08,220
it must be a mapped object type.

147
00:05:08,220 --> 00:05:09,843
So essentially it's saying,

148
00:05:09,843 --> 00:05:11,400
hey I can't use this
literal union right here

149
00:05:11,400 --> 00:05:13,500
because then I would only
have three different options.

150
00:05:13,500 --> 00:05:15,840
So instead, all you need
to do is replace this colon

151
00:05:15,840 --> 00:05:17,760
with the word in and that'll give you the

152
00:05:17,760 --> 00:05:18,960
exact same thing you're looking for.

153
00:05:18,960 --> 00:05:21,510
So now my keys must be
one of the skill levels.

154
00:05:21,510 --> 00:05:24,232
You can see beginner,
expert, intermediate,

155
00:05:24,232 --> 00:05:25,837
and then it's going to work just fine.

156
00:05:25,837 --> 00:05:26,670
And actually I need to
use all three of them.

157
00:05:26,670 --> 00:05:28,740
'Cause I'm saying I have
an index for each one

158
00:05:28,740 --> 00:05:30,030
of these different skill levels.

159
00:05:30,030 --> 00:05:31,998
That's essentially what
this is saying for me.

160
00:05:31,998 --> 00:05:33,540
Now, we could also go ahead and say,

161
00:05:33,540 --> 00:05:35,790
what if we wanted to
group by name instead?

162
00:05:35,790 --> 00:05:38,550
Well, what I could do is I
could get the name property here

163
00:05:38,550 --> 00:05:40,050
and instead of using in,

164
00:05:40,050 --> 00:05:42,115
I would just use that colon
syntax just like I did before.

165
00:05:42,115 --> 00:05:43,865
And now it's saying that any string

166
00:05:43,865 --> 00:05:45,990
is essentially going to be valid.

167
00:05:45,990 --> 00:05:47,100
So if I just came in here

168
00:05:47,100 --> 00:05:49,170
and I change this to any string
and all it doesn't matter,

169
00:05:49,170 --> 00:05:50,520
you can see that that's going to be valid.

170
00:05:50,520 --> 00:05:53,070
And that's 'cause the type of
my name up here is a string.

171
00:05:53,070 --> 00:05:54,630
And this doesn't have to be used

172
00:05:54,630 --> 00:05:56,160
with indexes inside of indexes.

173
00:05:56,160 --> 00:05:57,785
I could just say string

174
00:05:57,785 --> 00:05:58,920
like I did before and
that's gonna work fine.

175
00:05:58,920 --> 00:06:01,470
The whole idea behind this
index property right here

176
00:06:01,470 --> 00:06:02,610
is you're essentially saying,

177
00:06:02,610 --> 00:06:04,500
I want to have any of the keys

178
00:06:04,500 --> 00:06:06,240
that match this specific type.

179
00:06:06,240 --> 00:06:08,670
For example, string have a default value

180
00:06:08,670 --> 00:06:10,740
or a default type of a person array.

181
00:06:10,740 --> 00:06:12,390
So now every single thing that matches

182
00:06:12,390 --> 00:06:14,259
that particular key is
going to be a person array.

183
00:06:14,259 --> 00:06:16,260
Now the very final thing you can do

184
00:06:16,260 --> 00:06:17,940
with this index type has nothing to do

185
00:06:17,940 --> 00:06:19,684
with creating objects,

186
00:06:19,684 --> 00:06:20,970
but instead is kind of extrapolating out

187
00:06:20,970 --> 00:06:22,710
an object or an array.

188
00:06:22,710 --> 00:06:25,011
So for example, let's just
create an array, really simple.

189
00:06:25,011 --> 00:06:28,563
We'll say const A equals 1, 2, 3.

190
00:06:28,563 --> 00:06:30,630
And actually let's
change these to strings.

191
00:06:30,630 --> 00:06:32,550
So we'll just have some random strings

192
00:06:32,550 --> 00:06:34,490
inside of here and let's
do a Boolean as well.

193
00:06:34,490 --> 00:06:35,460
So we hover over A,

194
00:06:35,460 --> 00:06:37,980
you can see it's a string
or a Boolean array,

195
00:06:37,980 --> 00:06:39,840
relatively straightforward for our syntax.

196
00:06:39,840 --> 00:06:41,580
And if we wanted to manually type that,

197
00:06:41,580 --> 00:06:44,190
that would just be string or Boolean.

198
00:06:44,190 --> 00:06:45,630
And we wanna just wrap that in parentheses

199
00:06:45,630 --> 00:06:47,580
because either one of those
are going to be in our array.

200
00:06:47,580 --> 00:06:50,580
That's what our specific hard
coded type is going to be.

201
00:06:50,580 --> 00:06:52,680
Now what we wanna do is
we wanna get the type

202
00:06:52,680 --> 00:06:54,690
of something that we
can put into our array.

203
00:06:54,690 --> 00:06:56,310
So essentially from this type right here

204
00:06:56,310 --> 00:06:58,920
I wanna get either string or Boolean.

205
00:06:58,920 --> 00:07:00,270
So I want to essentially create a type

206
00:07:00,270 --> 00:07:01,830
that is just string or Boolean,

207
00:07:01,830 --> 00:07:04,140
just the things that can go into my array.

208
00:07:04,140 --> 00:07:05,550
Well, let's create a type for that.

209
00:07:05,550 --> 00:07:07,710
We can say type A, it doesn't
really matter what we call it,

210
00:07:07,710 --> 00:07:10,140
and this is going to be
coming from that a variable.

211
00:07:10,140 --> 00:07:11,580
So we can say type of A,

212
00:07:11,580 --> 00:07:13,620
and what I wanna do, I'm gonna
wrap this in parentheses,

213
00:07:13,620 --> 00:07:14,970
so this all executes.

214
00:07:14,970 --> 00:07:15,803
Now if I just do this

215
00:07:15,803 --> 00:07:17,820
I get the exact same
type as you can see here

216
00:07:17,820 --> 00:07:19,920
it's going to be string or Boolean array.

217
00:07:19,920 --> 00:07:21,480
Now I can use my index type

218
00:07:21,480 --> 00:07:22,890
to actually extrapolate over that.

219
00:07:22,890 --> 00:07:24,390
So you know before I could say like

220
00:07:24,390 --> 00:07:27,390
of index zero and that's going
to give me a specific value

221
00:07:27,390 --> 00:07:29,190
but in my case I wanna get what the values

222
00:07:29,190 --> 00:07:31,740
are going to be across all
of the different indexes

223
00:07:31,740 --> 00:07:32,760
of my array.

224
00:07:32,760 --> 00:07:35,340
And when using arrays, you
use numbers as indexes,

225
00:07:35,340 --> 00:07:37,015
so I could pass in the
type of number here.

226
00:07:37,015 --> 00:07:39,575
And what that's going to do is it's going

227
00:07:39,575 --> 00:07:42,195
to take my array here and it's going to go

228
00:07:42,195 --> 00:07:43,577
to every single index that's possible

229
00:07:43,577 --> 00:07:44,930
in that array and determine
what could those types be.

230
00:07:44,930 --> 00:07:48,300
In my case, my array has a type
of string or Boolean array.

231
00:07:48,300 --> 00:07:50,100
So my A type here you can see is now set

232
00:07:50,100 --> 00:07:51,570
to string or Boolean.

233
00:07:51,570 --> 00:07:54,360
It's essentially extrapolating
over every single iteration

234
00:07:54,360 --> 00:07:57,390
of what the number could
give you for an array here.

235
00:07:57,390 --> 00:07:59,760
Essentially if you pass
a more generic type

236
00:07:59,760 --> 00:08:01,710
so you don't pass like a specific string

237
00:08:01,710 --> 00:08:03,960
or a specific number and
you pass a more generic type

238
00:08:03,960 --> 00:08:05,790
like number string or Kiev,

239
00:08:05,790 --> 00:08:07,380
it's going to just extrapolate

240
00:08:07,380 --> 00:08:09,390
over the entire object or array

241
00:08:09,390 --> 00:08:11,550
and determine what are the
things that could be returned

242
00:08:11,550 --> 00:08:13,950
when you're using a
number for the actual type

243
00:08:13,950 --> 00:08:14,970
for the key.

244
00:08:14,970 --> 00:08:16,680
I can do the exact same
thing with an object,

245
00:08:16,680 --> 00:08:19,020
let's create an object here
and we're just gonna say

246
00:08:19,020 --> 00:08:23,910
name is Kyle and age is going to be 28,

247
00:08:23,910 --> 00:08:26,345
the comment in there, just like that.

248
00:08:26,345 --> 00:08:27,178
And now instead of using a number index

249
00:08:27,178 --> 00:08:29,400
'cause obviously there's
no number index for this,

250
00:08:29,400 --> 00:08:30,870
what I could do is I could say, you know,

251
00:08:30,870 --> 00:08:33,150
just name and now my type
A is going to be string

252
00:08:33,150 --> 00:08:35,099
and if I said just age

253
00:08:35,099 --> 00:08:36,060
you can see the type here
is going to be number.

254
00:08:36,060 --> 00:08:37,890
But if I want to get any of the values

255
00:08:37,890 --> 00:08:39,330
that are possible for name, age,

256
00:08:39,330 --> 00:08:41,190
or any other keys I add in there.

257
00:08:41,190 --> 00:08:42,900
But what I can do is I can get the key

258
00:08:42,900 --> 00:08:46,230
of this type of A, there we go.

259
00:08:46,230 --> 00:08:47,970
So type of A is essentially just getting

260
00:08:47,970 --> 00:08:49,170
the type of this variable.

261
00:08:49,170 --> 00:08:51,150
If we actually gave it a specific type

262
00:08:51,150 --> 00:08:53,610
we wouldn't need to have this
type of in every single place.

263
00:08:53,610 --> 00:08:55,080
I'm just saying whatever the type of A is

264
00:08:55,080 --> 00:08:57,270
which in my case is an
object that has a name

265
00:08:57,270 --> 00:08:59,220
which is a string and an
age, which is a number.

266
00:08:59,220 --> 00:09:00,960
I wanna get all the keys from that.

267
00:09:00,960 --> 00:09:03,060
That gives me name or age.

268
00:09:03,060 --> 00:09:05,490
And then from there I'm
taking that name or age

269
00:09:05,490 --> 00:09:06,960
and I'm passing it along as an index.

270
00:09:06,960 --> 00:09:09,270
So I'm saying give me
all the possible values

271
00:09:09,270 --> 00:09:11,490
for either the name or the age property.

272
00:09:11,490 --> 00:09:12,570
And now if I hover over this

273
00:09:12,570 --> 00:09:14,700
you can see it gives me string or number

274
00:09:14,700 --> 00:09:17,040
and that's because my name and
age could be either of those.

275
00:09:17,040 --> 00:09:19,107
I could pass in another variable,

276
00:09:19,107 --> 00:09:22,410
for example is programmer, let's say true,

277
00:09:22,410 --> 00:09:25,423
and now A here is going
to have that Boolean type

278
00:09:25,423 --> 00:09:26,419
added onto it.

279
00:09:26,419 --> 00:09:27,252
So all the different types
that I'm possibly adding

280
00:09:27,252 --> 00:09:29,880
to this A variable here are
getting down into this A type.

281
00:09:29,880 --> 00:09:32,340
So that's just another way
you can use the index type.

282
00:09:32,340 --> 00:09:33,801
For the most part

283
00:09:33,801 --> 00:09:34,950
you're probably going to
be using the index type

284
00:09:34,950 --> 00:09:37,380
either inside of arrays
with that number syntax

285
00:09:37,380 --> 00:09:38,460
or you're gonna be using it inside

286
00:09:38,460 --> 00:09:41,190
of objects with like a hard
coded value, such as name.

287
00:09:41,190 --> 00:09:43,320
Most of the other use
cases are not super common

288
00:09:43,320 --> 00:09:44,490
unless you're writing some more niche

289
00:09:44,490 --> 00:09:46,340
or more complicated type script code.