1
00:00:00,150 --> 00:00:01,140
- Now the read-only property

2
00:00:01,140 --> 00:00:03,030
is something you're going
to use all the time.

3
00:00:03,030 --> 00:00:04,530
But this property, the keyof property

4
00:00:04,530 --> 00:00:05,640
is a little bit more niche

5
00:00:05,640 --> 00:00:07,620
and a little bit more complicated.

6
00:00:07,620 --> 00:00:09,180
Let's take for example, this code.

7
00:00:09,180 --> 00:00:11,610
We have a person type
super straightforward

8
00:00:11,610 --> 00:00:14,160
and then we have a function
for getting a value.

9
00:00:14,160 --> 00:00:16,770
And the way that this works
is we want to pass it a key

10
00:00:16,770 --> 00:00:17,603
from our person.

11
00:00:17,603 --> 00:00:19,950
For example, we pass it either name or age

12
00:00:19,950 --> 00:00:23,070
and it'll access that value
from our person and return it.

13
00:00:23,070 --> 00:00:26,820
So if I were to call getValue
with an age passed in here

14
00:00:26,820 --> 00:00:28,710
and then I pass it in a person object,

15
00:00:28,710 --> 00:00:32,910
so we'll say name of Kyle,
age is going to be 28.

16
00:00:32,910 --> 00:00:34,620
What's going to happen
when I call this function

17
00:00:34,620 --> 00:00:36,630
is it's going to return to me 28

18
00:00:36,630 --> 00:00:38,520
because I'm accessing the age property

19
00:00:38,520 --> 00:00:41,190
and it's getting it from
this specific person.

20
00:00:41,190 --> 00:00:43,410
So we could come in here and
say age is equal to that,

21
00:00:43,410 --> 00:00:45,660
and this should be a
number with the value 28.

22
00:00:45,660 --> 00:00:47,160
But right now we don't
have everything typed up

23
00:00:47,160 --> 00:00:49,110
so it's obviously not working.

24
00:00:49,110 --> 00:00:52,020
This is where the keyof type comes in.

25
00:00:52,020 --> 00:00:54,090
Essentially, it's a type
that allows us to say

26
00:00:54,090 --> 00:00:56,490
that the property we're
setting to this type

27
00:00:56,490 --> 00:01:00,150
is going to be one of the
keys from that specific type.

28
00:01:00,150 --> 00:01:02,970
So our keys for the
person are name and age.

29
00:01:02,970 --> 00:01:05,460
So by using the keyof
property on our person,

30
00:01:05,460 --> 00:01:07,740
we'd be saying that it could
be either the string name

31
00:01:07,740 --> 00:01:09,150
or the string age.

32
00:01:09,150 --> 00:01:11,280
So let's define this key here using keyof,

33
00:01:11,280 --> 00:01:13,260
so we just put keyof as a prefix

34
00:01:13,260 --> 00:01:14,550
and then we put the type you want,

35
00:01:14,550 --> 00:01:16,200
which in our case is person.

36
00:01:16,200 --> 00:01:17,520
Now, immediately you notice that got rid

37
00:01:17,520 --> 00:01:19,530
of all of the different
errors that we had.

38
00:01:19,530 --> 00:01:20,370
And if we hover over this,

39
00:01:20,370 --> 00:01:22,200
you can see it's just a keyof Person.

40
00:01:22,200 --> 00:01:23,100
But the really great thing

41
00:01:23,100 --> 00:01:25,470
is the auto completely we
get now and the typing.

42
00:01:25,470 --> 00:01:26,580
I hover over my age,

43
00:01:26,580 --> 00:01:27,930
you can see that it's saying that this age

44
00:01:27,930 --> 00:01:29,640
is a string or a number.

45
00:01:29,640 --> 00:01:31,320
Now, the reason it knows
it's going to be a string

46
00:01:31,320 --> 00:01:33,180
or a number is because in my person,

47
00:01:33,180 --> 00:01:35,700
I have string and numbers my only types.

48
00:01:35,700 --> 00:01:37,290
If I have another type in here,

49
00:01:37,290 --> 00:01:40,020
for example, isProgrammer,
which I'll leave as optional.

50
00:01:40,020 --> 00:01:41,730
And I set this to a Boolean.

51
00:01:41,730 --> 00:01:42,563
Now you're gonna notice

52
00:01:42,563 --> 00:01:44,670
that this age could be either a string,

53
00:01:44,670 --> 00:01:47,820
a number, a Boolean,
or it can be undefined.

54
00:01:47,820 --> 00:01:48,990
And the reason it can be undefined

55
00:01:48,990 --> 00:01:51,240
is because we made it optional here.

56
00:01:51,240 --> 00:01:52,920
And this may seem like it's really niche

57
00:01:52,920 --> 00:01:54,840
and not something you're
gonna use that often,

58
00:01:54,840 --> 00:01:57,870
but imagine you're writing
a function for groupBy.

59
00:01:57,870 --> 00:01:59,460
So we'd have a groupBy function here

60
00:01:59,460 --> 00:02:02,100
where we want to groupBy a person object.

61
00:02:02,100 --> 00:02:04,350
Well, we need to have
the keys we can groupBy,

62
00:02:04,350 --> 00:02:07,770
for example, the age, the
name, the isProgrammer Boolean

63
00:02:07,770 --> 00:02:09,810
to be able to groupBy
those different things.

64
00:02:09,810 --> 00:02:12,150
So that's a perfect use case
where you'd want to have key

65
00:02:12,150 --> 00:02:13,050
of inside of there.

66
00:02:13,050 --> 00:02:14,160
I mean, the signature essentially

67
00:02:14,160 --> 00:02:16,020
would look exactly the same right here,

68
00:02:16,020 --> 00:02:17,820
but the code inside would
obviously be different

69
00:02:17,820 --> 00:02:20,280
to make it work with that groupBy syntax.

70
00:02:20,280 --> 00:02:22,290
Also, this would most
likely need to be an array

71
00:02:22,290 --> 00:02:24,480
of people in order to
actually make that work.

72
00:02:24,480 --> 00:02:26,340
So this would be like a people array,

73
00:02:26,340 --> 00:02:28,710
and then we would do some
type of reducer inside of here

74
00:02:28,710 --> 00:02:30,870
to get the actual groupBy syntax.

75
00:02:30,870 --> 00:02:32,070
But that's a perfect use case

76
00:02:32,070 --> 00:02:34,230
where you'd want to use
this keyof property.

77
00:02:34,230 --> 00:02:35,610
And there's plenty of other places

78
00:02:35,610 --> 00:02:37,360
where this would be useful as well.