Nested conditional types in Typescript

Introduction

Nested conditional types let you make decisions inside other decisions in TypeScript. This helps create smart types that change based on many conditions.

When you want a type to change based on multiple checks.

When you need to handle complex type logic in reusable ways.

When you want to create types that depend on other types deeply.

When you want to avoid repeating similar conditional checks.

When building libraries that need flexible type behavior.

Syntax

Typescript

type Result<T> = T extends string ? (T extends 'hello' ? number : boolean) : null;

Nested conditional types use a conditional inside another conditional's true or false branch.

They read like: if T is string, then check if T is 'hello', else boolean; otherwise null.

Examples

This type checks if T is a number. If yes, it checks if T is exactly 1. If yes, it returns 'One', else 'Other number'. If T is not a number, it returns 'Not a number'.

Typescript

type Check<T> = T extends number ? (T extends 1 ? 'One' : 'Other number') : 'Not a number';

This type returns true if T is the string 'yes', false if T is any other string, and undefined if T is not a string.

Typescript

type Nested<T> = T extends string ? (T extends 'yes' ? true : false) : undefined;

This type checks if T is an object. If yes, it checks if it has keys. If no keys, returns 'Empty object', else 'Has keys'. If not an object, returns 'Not object'.

Typescript

type DeepCheck<T> = T extends object ? (keyof T extends never ? 'Empty object' : 'Has keys') : 'Not object';

Sample Program

This program defines a nested conditional type Describe that checks the type T in steps. It returns different strings based on T's value or type. Then it assigns variables with these types and prints their values.

Typescript

type Describe<T> =
  T extends string ? (T extends 'hello' ? 'Greeting' : 'Other string') :
  T extends number ? (T extends 0 ? 'Zero' : 'Non-zero number') :
  'Unknown';

// Test cases
let a: Describe<'hello'> = 'Greeting';
let b: Describe<'world'> = 'Other string';
let c: Describe<0> = 'Zero';
let d: Describe<42> = 'Non-zero number';
let e: Describe<boolean> = 'Unknown';

console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);

Important Notes

Nested conditional types can get complex, so keep them readable by formatting well.

They help create very flexible and precise types in TypeScript.

Use them when simple conditional types are not enough.

Summary

Nested conditional types let you put one condition inside another.

They help create types that depend on multiple checks.

Use them to make your types smarter and more flexible.

Practice

1.

What does a nested conditional type in TypeScript allow you to do?

Example: type Example<T> = T extends string ? (T extends 'hello' ? number : boolean) : null;

easy

A. Write multiple unrelated types in one statement

B. Check multiple conditions inside one type to decide the result type

C. Create a function inside a type

D. Use loops inside type definitions

Solution

1. Step 1: Understand the conditional type structure

   The type checks if T extends string. If yes, it checks again if T extends 'hello'.

2. Step 2: Recognize nested conditions

   This shows a condition inside another condition, allowing different results based on multiple checks.

3. Final Answer:

   Check multiple conditions inside one type to decide the result type -> Option B

4. Quick Check:

   Nested conditional types = multiple checks [OK]

Hint: Nested ? inside ? means multiple conditions [OK]

Common Mistakes:

• Thinking nested means unrelated types
• Confusing conditional types with functions
• Assuming loops work inside types

2.

Which of the following is the correct syntax for a nested conditional type in TypeScript?

type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number';

easy

A. type Result<T> = T extends number ? T extends 5 ? 'Five' : 'Other' : 'Not a number';

B. type Result<T> = if T extends number then if T extends 5 then 'Five' else 'Other' else 'Not a number';

C. type Result<T> = T extends number ? { if T extends 5 then 'Five' else 'Other' } : 'Not a number';

D. type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number';

Solution

1. Step 1: Check the syntax of nested conditional types

   Nested conditional types use the syntax condition ? (nested condition ? trueType : falseType) : elseType.

2. Step 2: Identify correct parentheses and keywords

   type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number'; correctly uses parentheses and the ternary ? and : operators. Options A, B, and D have syntax errors or invalid keywords.

3. Final Answer:

   type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number'; -> Option D

4. Quick Check:

   Correct nested syntax = type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number'; [OK]

Hint: Use parentheses around nested ? : parts [OK]

Common Mistakes:

• Omitting parentheses around nested condition
• Using if/then syntax inside types
• Using braces {} instead of parentheses

3.

What is the resulting type of CheckType<"hello"> given this code?

type CheckType<T> = T extends string ? (T extends "hello" ? number : boolean) : null;

medium

A. boolean

B. string

C. number

D. null

Solution

1. Step 1: Evaluate outer condition

   T is "hello", which extends string, so the outer condition is true.

2. Step 2: Evaluate inner condition

   Now check if T extends "hello". It does, so the inner condition returns number.

3. Final Answer:

   number -> Option C

4. Quick Check:

   "hello" extends "hello" = number [OK]

Hint: Check outer then inner condition stepwise [OK]

Common Mistakes:

• Ignoring inner condition and picking boolean
• Choosing null because of outer else
• Confusing string literal with string type

4.

Identify the error in this nested conditional type:

type Test<T> = T extends number ? T extends 10 ? 'Ten' : 'Other' : 'Not a number'

medium

A. Missing parentheses around the nested conditional

B. Using wrong keywords instead of extends

C. Missing semicolon at the end

D. Incorrect use of quotes around string literals

Solution

1. Step 1: Check nested conditional syntax

   The nested conditional T extends 10 ? 'Ten' : 'Other' must be wrapped in parentheses to group it properly.

2. Step 2: Identify missing parentheses impact

   Without parentheses, TypeScript cannot parse the nested condition correctly, causing a syntax error.

3. Final Answer:

   Missing parentheses around the nested conditional -> Option A

4. Quick Check:

   Nested condition needs parentheses [OK]

Hint: Always wrap nested ? : in parentheses [OK]

Common Mistakes:

• Forgetting parentheses causes syntax errors
• Thinking semicolon is required inside type
• Misusing extends keyword

5.

Given this nested conditional type, what is the type of Result<string | number>?

type Result<T> = T extends string ? (T extends 'a' ? 1 : 2) : (T extends number ? 3 : 4);

hard

A. 1 | 2 | 3

B. 1 | 2 | 3 | 4

C. 2 | 3

D. never

Solution

1. Step 1: Distribute conditional over union types

   For T = string | number, TypeScript applies the conditional to each union member separately.

2. Step 2: Evaluate each branch

   For string: if 'a' then 1 else 2. For number: 3. So combined type is 1 | 2 | 3.

3. Final Answer:

   1 | 2 | 3 -> Option A

4. Quick Check:

   Union splits nested condition = 1|2|3 [OK]

Hint: Conditional types distribute over unions [OK]

Common Mistakes:

• Including 4 which is for non-string/number
• Not splitting union types correctly
• Assuming single output type for union