Conditional Types — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— Conditional Types
📋Basic
⚙️Exclude/Extract
🔄infer
✅Distributive
🎯 Next: Test →
Step 1 / 4
Speed
Basic
T extends U ? X : Y — types can branch on type compatibility💡 Analogy
Like an if-else in logic — "if T matches this shape, give type X, otherwise type Y".
Conditional types work like ternary operators for types. IsString<string> evaluates to true because string extends string.
Console Output
> IsString<string> = true
> IsString<number> = false
> IsString<"literal"> = true  (string literals extend string)
●conditional-types.ts
BasicL2–4
1// Basic conditional type: T extends U ? X : Y
2type IsString<T> = T extends string ? true : false;
3type A = IsString<string>;   // true
4type B = IsString<number>;   // false
5 
6// Exclude and Extract (built on conditional types)
7type Exclude<T, U> = T extends U ? never : T;
8type Extract<T, U> = T extends U ? T : never;
9 
10type Colors = 'red' | 'green' | 'blue';
11type WarmColors = Exclude<Colors, 'blue'>;   // 'red' | 'green'
12type CoolColors = Extract<Colors, 'blue' | 'purple'>; // 'blue'
13 
14// infer with conditional types
15type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
16type Num = UnwrapPromise<Promise<number>>;  // number
17type Str = UnwrapPromise<string>;           // string (not a Promise)
18 
19// Distributive conditional types — applies over union members
20type ToArray<T> = T extends any ? T[] : never;
21type StrOrNum = ToArray<string | number>; // string[] | number[]
22 
23// Non-distributive via tuple wrapping
24type ToArrayNonDist<T> = [T] extends [any] ? T[] : never;
25type Both = ToArrayNonDist<string | number>; // (string | number)[]
25 lines
Timeline — 4 Steps
Basic
T extends U ? X : Y — types can branch on type compatibility💡 Analogy
Like an if-else in logic — "if T matches this shape, give type X, otherwise type Y".
Conditional types work like ternary operators for types. IsString<string> evaluates to true because string extends string.
Console Output
> IsString<string> = true
> IsString<number> = false
> IsString<"literal"> = true  (string literals extend string)

Was this page helpful?

Discussion

T extends U ? X : Y — types can branch on type compatibility

💡 Analogy

Like an if-else in logic — "if T matches this shape, give type X, otherwise type Y".

Conditional types work like ternary operators for types. IsString<string> evaluates to true because string extends string.

Console Output

> IsString<string> = true
> IsString<number> = false
> IsString<"literal"> = true  (string literals extend string)

T extends U ? X : Y — types can branch on type compatibility

💡 Analogy

Like an if-else in logic — "if T matches this shape, give type X, otherwise type Y".

Conditional types work like ternary operators for types. IsString<string> evaluates to true because string extends string.

Console Output

> IsString<string> = true
> IsString<number> = false
> IsString<"literal"> = true  (string literals extend string)