- Now the read-only property
is something you're going to use all the time.
But this property, the keyof property
is a little bit more niche
and a little bit more complicated.
Let's take for example, this code.
We have a person type super straightforward
and then we have a function for getting a value.
And the way that this works is we want to pass it a key
from our person.
For example, we pass it either name or age
and it'll access that value from our person and return it.
So if I were to call getValue with an age passed in here
and then I pass it in a person object,
so we'll say name of Kyle, age is going to be 28.
What's going to happen when I call this function
is it's going to return to me 28
because I'm accessing the age property
and it's getting it from this specific person.
So we could come in here and say age is equal to that,
and this should be a number with the value 28.
But right now we don't have everything typed up
so it's obviously not working.
This is where the keyof type comes in.
Essentially, it's a type that allows us to say
that the property we're setting to this type
is going to be one of the keys from that specific type.
So our keys for the person are name and age.
So by using the keyof property on our person,
we'd be saying that it could be either the string name
or the string age.
So let's define this key here using keyof,
so we just put keyof as a prefix
and then we put the type you want,
which in our case is person.
Now, immediately you notice that got rid
of all of the different errors that we had.
And if we hover over this,
you can see it's just a keyof Person.
But the really great thing
is the auto completely we get now and the typing.
I hover over my age,
you can see that it's saying that this age
is a string or a number.
Now, the reason it knows it's going to be a string
or a number is because in my person,
I have string and numbers my only types.
If I have another type in here,
for example, isProgrammer, which I'll leave as optional.
And I set this to a Boolean.
Now you're gonna notice
that this age could be either a string,
a number, a Boolean, or it can be undefined.
And the reason it can be undefined
is because we made it optional here.
And this may seem like it's really niche
and not something you're gonna use that often,
but imagine you're writing a function for groupBy.
So we'd have a groupBy function here
where we want to groupBy a person object.
Well, we need to have the keys we can groupBy,
for example, the age, the name, the isProgrammer Boolean
to be able to groupBy those different things.
So that's a perfect use case where you'd want to have key
of inside of there.
I mean, the signature essentially
would look exactly the same right here,
but the code inside would obviously be different
to make it work with that groupBy syntax.
Also, this would most likely need to be an array
of people in order to actually make that work.
So this would be like a people array,
and then we would do some type of reducer inside of here
to get the actual groupBy syntax.
But that's a perfect use case
where you'd want to use this keyof property.
And there's plenty of other places
where this would be useful as well.