Mapped Types: Transform types using the mapped type feature.

In TypeScript, mapped types allow you to create new types by transforming properties in an existing type.

You can use mapped types to apply transformations to all properties in an object type, which is especially useful for modifying or enforcing rules across large types without needing to redefine each property manually.

Here's a breakdown of mapped types with examples.

Basic Syntax

A mapped type uses the in keyword to iterate over keys in a given type. Here’s the general structure:

1type MappedType<Type> = {
2  [Property in keyof Type]: Type[Property];
3};

In this structure:

Property in keyof Type means that we're iterating over each key in the Type.
Type[Property] accesses the type of each property.

Example Scenarios:

1. Making All Properties Optional

If you want to make all properties of an existing type optional, you can use a mapped type as follows:

1type Person = {
2  name: string;
3  age: number;
4  address: string;
5};
6
7type OptionalPerson = {
8  [Key in keyof Person]?: Person[Key];
9};
10
11// Equivalent to:
12type OptionalPerson = {
13  name?: string;
14  age?: number;
15  address?: string;
16};
17

2. Making All Properties Read-Only

To make all properties of an existing type read-only, you can add the readonly modifier:

1type ReadOnlyPerson = {
2  readonly [Key in keyof Person]: Person[Key];
3};
4
5// Equivalent to:
6type ReadOnlyPerson = {
7  readonly name: string;
8  readonly age: number;
9  readonly address: string;
10};
11

3. Creating Nullable Types

You can also make every property nullable:

1type NullablePerson = {
2  [Key in keyof Person]: Person[Key] | null;
3};
4
5// Equivalent to:
6type NullablePerson = {
7  name: string | null;
8  age: number | null;
9  address: string | null;
10};
11

4. Mapping Values to Another Type

For example, mapping each property to a boolean type to represent a validation state:

1type ValidationFlags<Type> = {
2  [Property in keyof Type]: boolean;
3};
4
5type PersonValidation = ValidationFlags<Person>;
6
7// Equivalent to:
8type PersonValidation = {
9  name: boolean;
10  age: boolean;
11  address: boolean;
12};
13

5. Custom Transformation of Properties

If you want to create a type where each property is a tuple of its key and value:

1type TuplePerson = {
2  [Key in keyof Person]: [Key, Person[Key]];
3};
4
5// Equivalent to:
6type TuplePerson = {
7  name: ["name", string];
8  age: ["age", number];
9  address: ["address", string];
10};
11

Conditional Mapped Types

You can even add conditional logic to mapped types. For instance, changing only properties of a certain type:

1type StringPropertiesToOptional<Type> = {
2  [Property in keyof Type]: Type[Property] extends string ? Type[Property] | undefined : Type[Property];
3};
4
5type ModifiedPerson = StringPropertiesToOptional<Person>;
6
7// Equivalent to:
8type ModifiedPerson = {
9  name?: string;
10  age: number;
11  address?: string;
12};
13

Summary

Mapped types provide flexibility by transforming types based on existing ones, making it easier to handle large structures and adapt them dynamically. You can make properties optional, readonly, nullable, or even map to different structures based on conditional logic, greatly improving type safety and reducing code redundancy.

Typescript Generic Constraints: Apply constraints to generics for more precise type definitions.

Typescript Conditional Types: Use extends, infer, and keyof to create conditional logic in types.