TypeScript
Challenge 1: Type math
Solve a task combining template literal and mapped.
Type math: template + mapped
Template literal types combine pieces into a string; mapped types regenerate an object's keys. Combine them to derive names like getX for every property.
type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};
type Person = { name: string; age: number };
// { getName: () => string; getAge: () => number }
The as clause renames the key; Capitalize upper-cases the first letter.
Exercise Produce a getter type
Write a Getters<T> type: for each property K produce a get${Capitalize<K>} key whose value is () => T[K]. Define Person as { name: string; age: number }, create a PersonGetters alias, build a value, and print the result of getName().
Show example solution
type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};
type Person = { name: string; age: number };
type PersonGetters = Getters<Person>;
const g: PersonGetters = {
getName: () => "Ada",
getAge: () => 36,
};
console.log(g.getName());
Exercise Produce a prefixed type
Write a Prefixed<T, P> type: prefix every key with P (`${P}${K}`). Define Box as Prefixed<{ id: number }, "$">, create a Box value, and print its $id field.
Show example solution
type Prefixed<T, P extends string> = {
[K in keyof T as `${P}${string & K}`]: T[K]
};
type Box = Prefixed<{ id: number }, "$">;
const b: Box = { $id: 42 };
console.log(b.$id);
Test yourself
-
After the definitions below, what is `Getters<Person>`?
type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};
type Person = { name: string };
- { getname: () => string }
- { GetName: () => string }
- { getName: () => string }
- { name: () => string }
Show answer
{ getName: () => string } — The template literal `get${Capitalize<...>}` turns the `name` key into `getName`; the value type becomes `() => T[K]`, i.e. `() => string`.
-
Capitalize the key
type Getters<T> = {
[K in keyof T as `get${____<string & K>}`]: () => T[K]
};
Show answer
type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};
-
Type math parts
- keyof T
- T's keys
- Capitalize<S>
- upper-cases first letter
- `get${...}`
- adds a string prefix
- as
- renames the key
Next lesson: Challenge 2: Variance
