TypeScript’s conditional types are a game-changer for creating flexible and powerful type systems. I’ve found them incredibly useful in my own projects, especially when building libraries that need to work with various data structures.

At their core, conditional types allow us to create types that change based on certain conditions. It’s like having an if-statement at the type level. This opens up a whole new world of possibilities for type-safe programming.

Let’s start with a simple example:

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

type Result1 = IsString<"hello">; // true
type Result2 = IsString<42>; // false

In this case, we’re creating a type that checks if the input type extends string. If it does, we return true, otherwise false. This might seem basic, but it’s the foundation for much more complex type manipulations.

One of the most powerful aspects of conditional types is their ability to infer types. This is where things get really interesting. We can use the infer keyword to extract types from complex structures:

type UnpackPromise<T> = T extends Promise<infer U> ? U : T;

type Result3 = UnpackPromise<Promise<string>>; // string
type Result4 = UnpackPromise<number>; // number

Here, we’re creating a type that unpacks the type wrapped in a Promise. If T is a Promise, we infer its inner type U and return that. Otherwise, we just return T as is.

I’ve found this pattern incredibly useful when working with async functions and APIs. It allows me to write more generic code that can handle both Promise-wrapped and non-Promise values seamlessly.

Conditional types really shine when combined with other TypeScript features like mapped types and template literal types. Here’s a more complex example that I’ve used in a recent project:

type PropType<T, Path extends string> = Path extends keyof T
  ? T[Path]
  : Path extends `${infer K}.${infer R}`
  ? K extends keyof T
    ? PropType<T[K], R>
    : never
  : never;

interface User {
  name: string;
  age: number;
  address: {
    street: string;
    city: string;
  };
}

type NameType = PropType<User, "name">; // string
type CityType = PropType<User, "address.city">; // string

This PropType utility type allows us to get the type of a nested property in an object using a string path. It uses recursive conditional types to handle nested structures.

One area where I’ve found conditional types particularly useful is in creating type-safe event systems. Here’s an example of how you might use conditional types to create a strongly-typed event emitter:

type EventMap = {
  click: { x: number; y: number };
  change: { oldValue: string; newValue: string };
};

type EventKey = keyof EventMap;

type EventListener<T extends EventKey> = (event: EventMap[T]) => void;

class TypedEventEmitter {
  private listeners: { [K in EventKey]?: EventListener<K>[] } = {};

  on<K extends EventKey>(event: K, listener: EventListener<K>) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event]!.push(listener);
  }

  emit<K extends EventKey>(event: K, data: EventMap[K]) {
    this.listeners[event]?.forEach(listener => listener(data));
  }
}

const emitter = new TypedEventEmitter();

emitter.on("click", event => {
  console.log(`Clicked at (${event.x}, ${event.y})`);
});

emitter.emit("click", { x: 10, y: 20 });

In this example, we use conditional types to ensure that the event data passed to emit matches the expected type for that event. This catches type mismatches at compile-time, preventing runtime errors.

Another powerful use of conditional types is in creating type-safe API wrappers. I recently worked on a project where we needed to create a strongly-typed wrapper around a REST API. Here’s a simplified version of what we came up with:

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";

type Endpoint = {
  "/users": {
    GET: { response: User[] };
    POST: { body: NewUser; response: User };
  };
  "/users/:id": {
    GET: { params: { id: string }; response: User };
    PUT: { params: { id: string }; body: UpdateUser; response: User };
    DELETE: { params: { id: string }; response: void };
  };
};

type APIFunction<
  E extends keyof Endpoint,
  M extends keyof Endpoint[E]
> = Endpoint[E][M] extends { params: infer P }
  ? (params: P, ...args: any[]) => Promise<Endpoint[E][M]["response"]>
  : Endpoint[E][M] extends { body: infer B }
  ? (body: B, ...args: any[]) => Promise<Endpoint[E][M]["response"]>
  : () => Promise<Endpoint[E][M]["response"]>;

function createAPI<E extends keyof Endpoint>(baseURL: string) {
  return {
    get: <M extends Extract<keyof Endpoint[E], "GET">>(
      endpoint: E
    ): APIFunction<E, M> => {
      // Implementation omitted for brevity
      return {} as any;
    },
    post: <M extends Extract<keyof Endpoint[E], "POST">>(
      endpoint: E
    ): APIFunction<E, M> => {
      // Implementation omitted for brevity
      return {} as any;
    },
    // Similar methods for PUT and DELETE
  };
}

const api = createAPI<keyof Endpoint>("https://api.example.com");

// Type-safe API calls
api.get("/users")().then(users => {
  users.forEach(user => console.log(user.name));
});

api.post("/users")({ name: "John", email: "[email protected]" }).then(user => {
  console.log(user.id);
});

api.get("/users/:id")({ id: "123" }).then(user => {
  console.log(user.name);
});

This example uses conditional types to create a type-safe wrapper around an API. The APIFunction type uses conditional types to determine the correct function signature based on the endpoint and HTTP method.

Conditional types can also be incredibly useful when working with generic components in frontend frameworks. For example, let’s say we’re building a form component in React that can handle different types of inputs:

type InputType<T> = T extends string
  ? "text"
  : T extends number
  ? "number"
  : T extends boolean
  ? "checkbox"
  : "text";

type InputProps<T> = {
  value: T;
  onChange: (value: T) => void;
  label: string;
  type: InputType<T>;
};

function Input<T>({ value, onChange, label, type }: InputProps<T>) {
  return (
    <label>
      {label}
      <input
        value={value as any}
        onChange={e => onChange(e.target.value as any)}
        type={type}
      />
    </label>
  );
}

function Form() {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);
  const [subscribed, setSubscribed] = useState(false);

  return (
    <form>
      <Input<string>
        value={name}
        onChange={setName}
        label="Name"
        type="text"
      />
      <Input<number>
        value={age}
        onChange={setAge}
        label="Age"
        type="number"
      />
      <Input<boolean>
        value={subscribed}
        onChange={setSubscribed}
        label="Subscribe to newsletter"
        type="checkbox"
      />
    </form>
  );
}

In this example, we use conditional types to determine the appropriate input type based on the generic type T. This allows us to create a reusable Input component that can handle different types of data while maintaining type safety.

Conditional types can also be used to create powerful utility types. Here’s an example of a DeepPartial type that makes all properties in an object, including nested ones, optional:

type DeepPartial<T> = T extends object
  ? { [P in keyof T]?: DeepPartial<T[P]> }
  : T;

interface DeepObject {
  a: string;
  b: {
    c: number;
    d: {
      e: boolean;
    };
  };
}

type PartialDeepObject = DeepPartial<DeepObject>;

const obj: PartialDeepObject = {
  a: "hello",
  b: {
    d: {}
  }
};

This DeepPartial type recursively applies the Partial type to all nested objects. It’s incredibly useful when working with complex data structures where you might only want to update a subset of properties.

Conditional types can also be used to implement type-level algorithms. Here’s an example of a type that can calculate the length of a tuple type:

type Length<T extends any[]> = T extends { length: infer L } ? L : never;

type Tuple = [number, string, boolean];
type TupleLength = Length<Tuple>; // 3

This Length type uses conditional types and type inference to extract the length property from array types.

In conclusion, conditional types are a powerful feature of TypeScript that allow us to create flexible, expressive type systems. They enable us to write more generic, reusable code while maintaining strong type safety. Whether you’re building complex libraries, working with APIs, or just trying to make your code more robust, mastering conditional types can significantly improve your TypeScript skills.

From type-safe event systems to API wrappers, from generic React components to deep partial types, conditional types open up a world of possibilities. They allow us to encode complex logic and relationships directly into our type system, catching more errors at compile-time and making our code more self-documenting.

As with any powerful feature, it’s important to use conditional types judiciously. Overuse can lead to complex type definitions that are hard to understand and maintain. But when used appropriately, they can significantly enhance the expressiveness and safety of our TypeScript code.

I encourage you to experiment with conditional types in your own projects. Start simple, and gradually build up to more complex use cases. You’ll likely find, as I have, that they become an indispensable tool in your TypeScript toolkit.