Nested conditional types in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a nested conditional type that returns 'string' if T is 'number', otherwise 'boolean'.

Typescript

type NestedType<T> = T extends number ? [1] : boolean;

Drag options to blanks, or click blank then click option'

Anumber

Bany

Cboolean

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' instead of 'string' as the true branch.

Confusing the order of true and false branches.

The nested conditional type returns string when T extends number, otherwise boolean.

2fill in blank

medium

Complete the nested conditional type to return 'true' if T is 'string', else check if T is 'boolean' and return 'false', otherwise 'never'.

Typescript

type CheckType<T> = T extends string ? true : T extends boolean ? [1] : never;

Drag options to blanks, or click blank then click option'

Afalse

Btrue

Cnever

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Returning 'true' instead of 'false' for the boolean check.

Using 'never' in the wrong branch.

The nested conditional checks if T is string returning true, else if T is boolean returning false, otherwise never.

3fill in blank

hard

Fix the error in the nested conditional type to correctly return 'number' if T is 'string', else 'string' if T is 'number', otherwise 'boolean'.

Typescript

type FixType<T> = T extends string ? [1] : T extends number ? string : boolean;

Drag options to blanks, or click blank then click option'

Astring

Bnumber

Cany

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Returning 'string' instead of 'number' for the first branch.

Mixing up the order of types.

The type should return number when T is string, so the first true branch is number.

4fill in blank

hard

Fill both blanks to create a nested conditional type that returns 'true' if T is 'string', 'false' if T is 'number', otherwise 'never'.

Typescript

type BooleanCheck<T> = T extends string ? [1] : T extends number ? [2] : never;

Drag options to blanks, or click blank then click option'

Atrue

Bfalse

Cnever

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping true and false values.

Using 'never' in the wrong place.

The type returns true for string, false for number, and never otherwise.

5fill in blank

hard

Fill all three blanks to define a nested conditional type that returns the uppercase string of T if T is 'string', returns T if T is 'number', otherwise returns 'unknown'.

Typescript

type Transform<T> = T extends string ? [1] : T extends number ? [2] : [3];

Drag options to blanks, or click blank then click option'

AUppercase<T>

BT

Cunknown

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Not using Uppercase for strings.

Returning wrong types for number or default case.

The type uses Uppercase<T> for strings, returns T for numbers, and unknown otherwise.

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