Mapped Types

Question 1

What are mapped types?

Answer 1

A mapped type is a generic type which uses a union of PropertyKeys (frequently created via a keyof) to iterate through keys to create a type:

A mapped type is defined using the in keyword in TypeScript, along with a type variable and an object type. Here’s a basic example of a mapped type:

type MappedType<T> = {
  [K in keyof T]: T[K];
};

Here, T is a generic type parameter, and K represents the keys of the object type T. The mapped type MappedType<T> iterates over each key in T and maps it to the corresponding value type T[K].

“Documentation - Mapped Types” (typescriptlang.org). Retrieved April 5, 2023.

Question 2

Common use cases of mapped types

Answer 2

Some common use cases of mapped types include:

1.- Making all properties of a type optional:

type Partial<T> = {
  [K in keyof T]?: T[K];
};

2.- Making all properties of a type read-only:

type Readonly<T> = {
  readonly [K in keyof T]: T[K];
};

3.- Picking a subset of properties from an existing type:

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

4.- Omitting a subset of properties from an existing type:

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

“Documentation - Mapped Types” (typescriptlang.org). Retrieved April 5, 2023.

Question 3

What are mapping modifiers in TypeScript?

Answer 3

Mapping modifiers in TypeScript are a feature of mapped types that allows you to modify the properties of the object type you’re mapping over. They help add, remove, or change the attributes of properties, such as making them optional, read-only, or mutable.

“Mapping Modifiers” (typescriptlang.org). Retrieved April 5, 2023.

Question 4

How can you make mapped properties optional?

Answer 4

The optional modifier, denoted by ?, makes mapped properties optional. When using the resulting type, the properties can be left undefined without causing a type error.

Example:

type OptionalProperties<T> = {
  [K in keyof T]?: T[K];
};

“Mapping Modifiers” (typescriptlang.org). Retrieved April 5, 2023.

Question 5

How can you make optional mapped properties required?

Answer 5

The required modifier, denoted by -?, makes optional properties required. When using the resulting type, the previously optional properties must now be provided and cannot be left undefined.

Example:

type RequiredProperties<T> = {
  [K in keyof T]-?: T[K];
};

“Mapping Modifiers” (typescriptlang.org). Retrieved April 5, 2023.

Question 6

How can you mark mapped properties as read only?

Answer 6

The read-only modifier, denoted by readonly, makes mapped properties read-only. After the object is initialized, its properties cannot be changed.

Example:

type ReadonlyProperties<T> = {
  readonly [K in keyof T]: T[K];
};

“Mapping Modifiers” (typescriptlang.org). Retrieved April 5, 2023.

Question 7

How can you make readonly mapped properties mutable?

Answer 7

The mutable modifier, denoted by -readonly, makes read-only properties mutable. After the object is initialized, its read-only properties can now be changed.

Example:

type MutableProperties<T> = {
  -readonly [K in keyof T]: T[K];
};

“Mapping Modifiers” (typescriptlang.org). Retrieved April 5, 2023.

Question 8

What is key remapping?

Answer 8

Key remapping is a feature of mapped types in TypeScript that allows you to create new object types with transformed property keys based on the structure of existing types. Key remapping is achieved using the as clause in mapped types.

“Key Remapping via as” (typescriptlang.org). Retrieved April 5, 2023.

Question 9

How do you use the as clause for key remapping?

Answer 9

To use the as clause for key remapping, define a mapped type with a type variable and an object type, then use the as keyword followed by an expression to transform the property keys.

Example:

type MappedWithKeyRemapping<T> = {
  [K in keyof T as `prefix_${string & K}`]: T[K];
};

In this example, the mapped type MappedWithKeyRemapping<T> iterates over each key K in the object type T and adds a prefix prefix_ to each key.

“Key Remapping via as” (typescriptlang.org). Retrieved April 5, 2023.

Question 10

What is the purpose of key remapping in TypeScript?

Answer 10

Key remapping allows you to create new object types with transformed property keys based on existing types. This feature can be useful for:

1.- Renaming property keys to follow specific naming conventions.
2.- Merging or extending types with conflicting property names.
3.- Creating new types that represent the result of specific operations on objects.

“Key Remapping via as” (typescriptlang.org). Retrieved April 5, 2023.

Question 11

Can you provide an example of key remapping in TypeScript?

Answer 11

Here’s an example of using key remapping to make a type with keys prefixed with “readonly”:

type ReadonlyKeysPrefixed<T> = {
  [K in keyof T as `readonly_${string & K}`]: T[K];
};

type OriginalType = {
  name: string;
  age: number;
};

type TransformedType = ReadonlyKeysPrefixed<OriginalType>;
// TransformedType is { readonly_name: string; readonly_age: number; }

In this example, the ReadonlyKeysPrefixed<T> mapped type iterates over each key K in the object type T and adds a prefix readonly_ to each key. When applied to the OriginalType, it creates a new type TransformedType with the transformed keys.

“Key Remapping via as” (typescriptlang.org). Retrieved April 5, 2023.