TypeScript Mapped Types
Mapped types let you create a new type by transforming every property of an existing type using a consistent rule, similar to how array methods like map() transform every element.
Mapped types are the mechanism behind built-in utility types like Partial and Readonly. You can also write your own mapped types for custom transformations not covered by the built-in ones.
type ReadonlyVersion<T> = {
readonly [K in keyof T]: T[K];
};Basic mapped type syntax
A mapped type looks like `{ [K in keyof T]: T[K] }`, which iterates over every key K in T and keeps the same type for each property, forming an identical copy of T.
Adding modifiers
You can add `readonly` or `?` in a mapped type to transform every property, such as `{ readonly [K in keyof T]: T[K] }`, which is essentially how the built-in Readonly<T> works.
interface User {
name: string;
age: number;
}
type ReadonlyUser = {
readonly [K in keyof User]: User[K];
};
const u: ReadonlyUser = { name: "Sam", age: 22 };
console.log(u.name);SamThe mapped type makes every property of User readonly by iterating over its keys.
interface User {
name: string;
age: number;
}
type OptionalUser = {
[K in keyof User]?: User[K];
};
const partialUser: OptionalUser = { name: "Kim" };
console.log(partialUser);{ name: 'Kim' }Adding `?` in the mapped type makes every property optional, similar to the built-in Partial<T>.
Key points
- Mapped types transform every property of an existing type using one rule.
- They use the syntax `[K in keyof T]` to iterate over property keys.
- Modifiers like readonly and ? can be added during mapping.
- Built-in utility types like Partial and Readonly are implemented using mapped types.