Day 48: Mapped Types

What Are Mapped Types? 🤔

Mapped types are a way to create new types by transforming the properties of an existing type. Essentially, they allow you to iterate over the properties of one type and create a new type based on those properties. This can be incredibly useful for scenarios like creating read-only or optional versions of types or filtering out specific properties.

Basic Syntax 📝

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

Here's a breakdown of what each part means:

• {}: Encloses the mapped type definition.

• T represents the original type.

• P represents each property in the original type.

• keyof T produces a union type of all keys in T.

• in is a keyword that denotes the mapping process.

• NewType is the type you want to assign to each property in the new type.

Creating a Read-Only Type 🔒

One common use case for mapped types is to create a read-only version of an object type. Let's say we have a type representing a user:

type User = {
  id: number;
  name: string;
  email: string;
};

We can create a read-only version of this type using a mapped type:

type ReadOnlyUser = {
  readonly [K in keyof User]: User[K];
};

In this example, [K in keyof User] iterates over each property in the User type, and User[K] retains the type of each property. The readonly modifier makes each property read-only.

Now, if we try to modify a property of ReadOnlyUser, TypeScript will throw an error:

const user: ReadOnlyUser = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
};

user.name = "Bob"; // Error: Cannot assign to 'name' because it is a read-only property.

Creating Optional Properties ❓

Mapped types can also be used to make properties optional. Let's say we have a type representing a configuration:

type AppConfig = {
  apiKey: string;
  loggingEnabled: boolean;
  maxRequestsPerMinute: number;
};

We can create a version of this type where all properties are optional like this:

type OptionalConfig = {
  [K in keyof AppConfig]?: AppConfig[K];
};

Now, all properties in OptionalConfig are optional:

const config: OptionalConfig = {
  apiKey: "my-api-key",
  // No need to specify other properties
};

Filtering Out Properties 🧹

Mapped types also allow us to filter out specific properties from a type. Let's say we want to create a type that excludes the loggingEnabled property from AppConfig:

type WithoutLogging = {
  [K in Exclude<keyof AppConfig, "loggingEnabled">]: AppConfig[K];
};

In this example, we use the Exclude utility type to remove the "loggingEnabled" property from the keys of AppConfig. The resulting type, WithoutLogging, does not contain the loggingEnabled property:

const config: WithoutLogging = {
  apiKey: "my-api-key",
  maxRequestsPerMinute: 100,
};