Nested conditional types in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a nested conditional type in TypeScript?

A nested conditional type is a conditional type used inside another conditional type, allowing complex type decisions based on multiple conditions.

intermediate

Explain the syntax of a nested conditional type.

It uses the form Condition1 ? (Condition2 ? TrueType2 : FalseType2) : FalseType1, where one conditional type is inside the true or false branch of another.

beginner

Given T extends string ? (T extends "hello" ? 1 : 2) : 3, what is the type when T = "hello"?

The type is 1 because T extends string and also extends "hello".

intermediate

Why use nested conditional types instead of multiple separate conditional types?

Nested conditional types allow combining multiple checks in one type expression, making type logic more concise and expressive.

advanced

How do nested conditional types help with type inference?

They enable fine-grained type decisions based on multiple conditions, improving the accuracy of inferred types in complex scenarios.

What does a nested conditional type allow you to do?

A Make type decisions based on multiple conditions inside one type

B Write multiple unrelated types

C Only check one condition at a time

D Create runtime if-else statements

Nested conditional types let you check multiple conditions inside a single type expression.

In T extends string ? (T extends "a" ? 1 : 2) : 3, what is the result if T = number?

A 3

B 2

C 1

D Error

Since T does not extend string, the outer condition is false, so the result is 3.

Which part of a nested conditional type can contain another conditional type?

A Only the true branch

B Either the true or false branch

C Neither branch

D Only the false branch

Nested conditional types can appear in either the true or false branch of a conditional type.

What is the main benefit of nested conditional types?

A Improve performance of JavaScript

B Simplify runtime code

C Allow complex compile-time type logic

D Replace interfaces

They allow complex decisions about types during compile time, improving type safety.

Which TypeScript feature is essential to use nested conditional types?

A Modules

B Enums

C Classes

D Generics

Generics let you create flexible types that can be checked with nested conditional types.

Describe how nested conditional types work and give a simple example.

Think about how one condition can be inside another.

Explain why nested conditional types are useful in TypeScript type design.

Consider how complex type decisions are made.

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