Designing Your Types 11 exercises

Transcript

00:00 We're back with our interface attributes and we have our attribute getters which is a map type returning like building out a beautiful new object where instead of the keys just being values, the keys are functions which return those values. Nice.

00:14 Except though, we want to do a little bit of funky stuff in here. Instead of it being firstName, lastName and age in the objects, we want it to be getFirstName, getLastName and getAge.

00:26 We want to really signal that these are getters. So your job is to try to work out how inside attribute getters we can remap these keys. And you're going to need, I think, three tools for this. You're going to need to look up key remapping with as inside a map type.

00:44 You're going to need a template literal type and you're going to need the capitalise type helper. Wow! Basically three newish concepts that we need to get our head around. This is a proper type challenge.

00:58 So make sure that attribute getters looks like this at the end of it. This is still going to be a map type. And most of the code is actually just going to be inside this little mapper there inside the property kind of calculator. Good luck.

Problem

Remapping Keys in TypeScript Map Types

We start with our Attributes interface and AttributeGetters mapped type:


interface Attributes {
  firstName: string;
  lastName: string;
  age: number;
}
type AttributeGetters = {
  [K in keyof Attributes]: () => Attributes[K];
};

However this time, we want to change the output of

Transcript

00:14 Except though, we want to do a little bit of funky stuff in here. Instead of it being firstName, lastName and age in the objects, we want it to be getFirstName, getLastName and getAge.