Typescript Mapped Types And Conditional Types Complete Guide

Understanding TypeScript Mapped Types

What are Mapped Types?

Mapped types allow you to create new types by transforming existing ones. They're useful when you want to map the properties of an object type to a new property type.

Basic Syntax

The basic syntax for a mapped type looks like this:

type NewType = {
  [Key in keyof ExistingType]: NewValueType;
};

Here's what each part means:

• [Key in keyof ExistingType]: Iterates over all keys in ExistingType.
• NewValueType: The type that each key in ExistingType will have in NewType.

Example: Simple Mapped Type

Let's start with a simple example where we create a mapped type that converts all properties of an object type to optional.

Step 1: Define the Original Type

type User = {
  name: string;
  age: number;
  isActive: boolean;
};

Step 2: Create the Mapped Type

type PartialUser = {
  [Key in keyof User]?: User[Key];
};

In this example, PartialUser will have name, age, and isActive as optional properties.

Step 3: Use the Mapped Type

const partialUser: PartialUser = {
  name: "Alice", // Note: Only 'name' is required here.
};

Example: Adding Read-Only Properties

Now let's create a mapped type where all properties of an object type are read-only.

Step 1: Define the Original Type

We'll use the same User type from the previous example.

type User = {
  name: string;
  age: number;
  isActive: boolean;
};

Step 2: Create the Mapped Type

type ReadonlyUser = {
  readonly [Key in keyof User]: User[Key];
};

Step 3: Use the Mapped Type

const readonlyUser: ReadonlyUser = {
  name: "Bob",
  age: 30,
  isActive: true,
};

// This will cause an error because we made all properties read-only.
readonlyUser.name = "Changed"; // Error: Cannot assign to 'name' because it is a read-only property.

Example: Modifying Property Keys

Let's create a mapped type that adds the suffix _status to each property name.

Step 1: Define the Original Type

type User = {
  name: string;
  age: number;
  isActive: boolean;
};

Step 2: Create the Mapped Type with Modified Keys

type UserStatus = {
  [Key in keyof User as `${Key}_status`]: User[Key];
};

Note: The as keyword is used in newer versions of TypeScript (4.1 and above) to rename or transform keys during mapping.

Step 3: Use the Mapped Type

const userStatus: UserStatus = {
  name_status: "Alice",
  age_status: 25,
  isActive_status: false,
};

console.log(userStatus);

Understanding TypeScript Conditional Types

What are Conditional Types?

Conditional types enable you to express non-uniform type mappings based on conditions. They're powerful for creating flexible types that vary based on other types.

Basic Syntax

The basic syntax for a conditional type looks like this:

type NewType<T> = T extends Condition ? TrueType : FalseType;

Here's what each part means:

• T: The generic type parameter.
• Condition: The condition that T must extend.
• TrueType: The type that NewType will be if T satisfies the Condition.
• FalseType: The type that NewType will be if T does not satisfy the Condition.

Example: Basic Conditional Type

Let's create a conditional type that checks if a given type is a string and returns true, otherwise it returns false.

Step 1: Define the Conditional Type

type IsString<T> = T extends string ? true : false;

Step 2: Use the Conditional Type

type IsStr = IsString<string>; // true
type IsNum = IsString<number>; // false
type IsArr = IsString<string[]>; // false

console.log(IsStr, IsNum, IsArr); // true false false

Example: Creating a Union of Properties Based on Value Type

Now let's create a more complex conditional type that extracts property names from an object type where the properties are of a specific type (e.g., string).

Step 1: Define the Original Type

type Product = {
  id: number;
  name: string;
  price: number;
  description?: string;
};

Step 2: Create the Conditional Type

type StringKeys<T> = {
  [Key in keyof T]: T[Key] extends string ? Key : never;
}[keyof T];

In this example:

• The first level { [Key in keyof T]: T[Key] extends string ? Key : never } creates a type where property keys are mapped to themselves if their values are strings, otherwise they're mapped to never.
• The second level [keyof T] flattens the object type into a union of its keys, effectively removing never from the union.

Step 3: Use the Conditional Type

type ProductStringKeys = StringKeys<Product>;

// ProductStringKeys will be either 'name' | 'description'.
const productName: ProductStringKeys = 'name';
const productDescription: ProductStringKeys = 'description';

console.log(productName, productDescription); // name description

Example: Conditional Types with Mapped Types

Let's use both mapped types and conditional types to create a new type that adds an extra modified prefix to the property names only if the property value is a string.

Step 1: Define the Original Type

type Book = {
  title: string;
  author: string;
  yearPublished: number;
};

Step 2: Create the Conditional Mapped Type

type ConditionalModifiedKeys<T> = {
  [Key in keyof T as T[Key] extends string ? `modified_${Key}` : Key]: T[Key];
};

Here:

• The as keyword in [Key in keyof T as T[Key] extends string ? modified_${Key} : Key] renames the keys if they are of type string.
• T[Key] remains the same for other types.

Step 3: Use the Conditional Mapped Type

type ModifiedBook = ConditionalModifiedKeys<Book>;

// ModifiedBook will have keys 'modified_title', 'modified_author', and 'yearPublished'.
const modifiedBook: ModifiedBook = {
  modified_title: "The Great Gatsby",
  modified_author: "F. Scott Fitzgerald",
  yearPublished: 1925,
};

console.log(modifiedBook);

Putting It All Together: Combining Mapped and Conditional Types

Let's create a complex example that combines both mapped and conditional types. We'll define a mapped type that makes properties optional if they are of type number.

Example: Optional Numerical Properties

Step 1: Define the Original Type

type Employee = {
  id: number;
  name: string;
  department: string;
  salary: number;
};

Step 2: Create the Combined Mapped Type

type OptionalNumericProperties<T> = {
  [Key in keyof T]: Key extends keyof AnyNumberObject ? T[Key] | undefined : T[Key];
};

type AnyNumberObject = { [K: string]: number };

Here:

• OptionalNumericProperties maps through each key in T.
• It then uses a conditional type to check if Key exists in AnyNumberObject (an object with any string keys and numeric values).
• If Key is a numerical property, it makes it T[Key] | undefined (optional), else T[Key] remains the same.

Step 3: Use the Combined Mapped Type

type PartialSalaryEmployee = OptionalNumericProperties<Employee>;

const partialSalaryEmployee: PartialSalaryEmployee = {
  id: 1,
  name: "Charlie",
  department: "Engineering",
  // salary is now optional
  salary: undefined,
};

console.log(partialSalaryEmployee);

Real-World Use Case: Transforming API Responses

Let's use mapped and conditional types to transform an API response into a more manageable format. Suppose we receive an API response where each property value can be either the actual data or an Error object.

Example: Transforming API Response

Step 1: Define the Original Type

type ApiResponse = {
  userId: number | Error; // ID can be a number or an error
  userName: string | Error; // Name can be a string or an error
  userEmail: string | Error; // Email can be a string or an error
};

Step 2: Create the Mapped Type to Extract Data

type DataExtractor<T> = {
  [Key in keyof T]: T[Key] extends Error ? never : T[Key];
} & {
  [Key in keyof T]: T[Key] extends Error ? never : Key;
};

Wait, that doesn't work correctly in this form! Let's refine it to two separate types:

type ErrorKeys<T> = {
  [Key in keyof T]: T[Key] extends Error ? Key : never;
}[keyof T];

type DataKeys<T> = {
  [Key in keyof T]: T[Key] extends Error ? never : Key;
}[keyof T];

type SuccessResponse<T> = {
  [Key in DataKeys<T>]: T[Key];
};

type ErrorResponse<T> = {
  [Key in ErrorKeys<T>]: T[Key];
};

Step 3: Use the Combined Mapped and Conditional Types

const apiResponse: ApiResponse = {
  userId: 2,
  userName: new Error("Invalid name"),
  userEmail: "charlie@example.com",
};

// Extract successful and erroneous keys
type SuccessfulData = SuccessResponse<ApiResponse>;
type ErroneousData = ErrorResponse<ApiResponse>;

const successData: SuccessfulData = {
  userId: apiResponse.userId as number,
  userEmail: apiResponse.userEmail,
};

const errorData: ErroneousData = {
  userName: apiResponse.userName as Error,
};

console.log(successData, errorData);

Conclusion

TypeScript Mapped Types and Conditional Types are powerful tools for defining flexible and reusable type structures. By understanding how to use them, you can create more robust and maintainable code. Practice with these examples to get a better grasp of their capabilities, and gradually apply them to your own projects.