Introduction to Conditional Types

Conditional types in TypeScript allow you to create types that adapt dynamically based on a condition, making your code more flexible and reusable.

They use a syntax similar to JavaScript's conditional (ternary) operator.

What Are Conditional Types?

Conditional types allow you to define a type that depends on another type. The basic syntax is:

T extends U ? X : Y

This means: If T extends U, the type is X, otherwise it is Y.

Basic Example of Conditional Types

Here’s a simple example:

type IsString<T> = T extends string ? 'Yes' : 'No';

// Test cases
type A = IsString<string>; // 'Yes'
type B = IsString<number>; // 'No'

Using Conditional Types for Function Overloads

Conditional types can simplify function overloads by dynamically determining return types:

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function getData(): string {
  return 'Hello';
}

type DataType = ReturnType<typeof getData>; // string

Distributive Conditional Types

When conditional types are applied to union types, they are distributed across each member of the union:

type ToArray<T> = T extends any ? T[] : never;

type A = ToArray<string | number>;
// A = string[] | number[]

Combining Conditional Types with Mapped Types

You can combine conditional types with mapped types for powerful type transformations:

type User = {
  id: number;
  name: string;
  isAdmin?: boolean;
};

type MakeRequired<T> = {
  [K in keyof T]-?: T[K] extends undefined ? never : T[K];
};

type RequiredUser = MakeRequired<User>;
// { id: number; name: string; isAdmin: never; }

Common Use Cases for Conditional Types

Conditional types are commonly used for:

• Inferring return types or parameters.
• Transforming unions and intersections.
• Creating utility types like Exclude, Extract, and NonNullable.

Practice Task

Create a conditional type that checks if a type is an array and, if so, returns its element type; otherwise, it returns the type itself.

Congratulations!

You’ve learned how to use conditional types to create dynamic and reusable type definitions in TypeScript. Practice these concepts to write more powerful and flexible TypeScript code!