SyntaxShelf

Conditional type

2 snippets in TypeScript

Also written as type conditional

TSTypeScript

Generics with Conditional Types

TS · Generics
Syntax
type Name<T> = T extends Condition ? TrueType : FalseType;
Example
type IsArray<T> = T extends any[] ? true : false;

type Test1 = IsArray<string[]>;  // true
type Test2 = IsArray<number>;    // false

// Extracting element types
type ElementOf<T> = T extends (infer E)[] ? E : never;

type StrEl = ElementOf<string[]>;      // string
type NumEl = ElementOf<number[]>;      // number
type NoEl = ElementOf<boolean>;        // never
Output
// Conditional types act like type-level if/else

Note When a conditional type receives a union as T, it distributes - the condition is applied to each union member independently. To prevent distribution, wrap both sides in brackets: [T] extends [Condition].

Conditional Types

TS · Advanced Types
Syntax
type Result = T extends Condition ? TrueType : FalseType;
Example
type IsString<T> = T extends string ? "yes" : "no";

type A = IsString<string>;    // "yes"
type B = IsString<number>;    // "no"
type C = IsString<"hello">;   // "yes"

// Practical: flatten one level of array
type Flatten<T> = T extends Array<infer Item> ? Item : T;

type Str = Flatten<string[]>;   // string
type Num = Flatten<number>;     // number (not an array, returned as-is)
Output
// Conditional types branch on whether T matches a shape

Note Conditional types distribute over naked union type parameters: IsString<string | number> becomes IsString<string> | IsString<number> = "yes" | "no". Wrap in tuple to prevent distribution: [T] extends [string] ? ... : ...

Frequently asked questions

How does TypeScript handle conditional type?
TypeScript covers this with 2 copy-ready snippets on this page. The "Generics with Conditional Types" snippet in TypeScript uses `type Name<T> = T extends Condition ? TrueType : FalseType;`.
Which code does the TypeScript example use?
The "Generics with Conditional Types" snippet uses `type Name<T> = T extends Condition ? TrueType : FalseType;`, from the Generics section of the TypeScript cheat sheet.
What other TypeScript snippets are shown for "conditional type"?
Besides "Generics with Conditional Types", this page also shows "Conditional Types".
Is there anything to watch out for?
Yes. For "Generics with Conditional Types": When a conditional type receives a union as T, it distributes - the condition is applied to each union member independently. To prevent distribution, wrap both sides in brackets: [T] extends [Condition].

Browse all tasks by intent