EasyGenerics📖 Theory Question

What is conditional generic typing — how do you write T extends U ? X : Y?

💡

Hint

Distribute over union members; resolve to different types based on whether T satisfies U

Full Answer

Conditional types select a type based on a condition, similar to a ternary operator for types.

// Basic syntax: T extends U ? TypeIfTrue : TypeIfFalse
type IsString<T> = T extends string ? 'yes' : 'no';

type A = IsString<string>;  // 'yes'
type B = IsString<number>;  // 'no'

Distribution over union types — when T is a naked type parameter, conditional types distribute:

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

type StringOrNumberArray = ToArray<string | number>;
// Distributes: (string extends unknown ? string[] : never) | (number extends unknown ? number[] : never)
// = string[] | number[]

// Prevent distribution with []
type ToArrayNonDist<T> = [T] extends [unknown] ? T[] : never;
type NonDist = ToArrayNonDist<string | number>; // (string | number)[]

infer keyword — extract a type within a conditional:

// Extract the return type of a function
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

type NumReturn = ReturnType<() => number>; // number
type VoidReturn = ReturnType<() => void>;  // void

// Extract element type from an array
type ElementType<T> = T extends (infer E)[] ? E : never;

type Elem = ElementType<string[]>; // string
💡 Conditional types power most of TypeScript's built-in utility types. Understanding infer unlocks writing your own ReturnType, Parameters, PromiseType, and similar utilities.

More Generics Questions

EasyWhat are generics and why are they useful in TypeScript?EasyWhat are generic constraints and how do you use the extends keyword with them?EasyWhat are default type parameters in TypeScript generics?MediumHow do generic functions differ from generic types? Show examples of each.

Practice this in a timed sprint →

5 free questions, no signup required

⚡ Start Sprint