Conditional type syntax in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a simple conditional type

What is the type of Result after this code runs?

Typescript

type IsString<T> = T extends string ? "Yes" : "No";
type Result = IsString<number>;

A "Yes"

B "No"

C number

D string

💡 Hint

Check if the type number extends string.

The conditional type checks if T extends string. Since number does not extend string, the result is the false branch: "No".

❓ Predict Output

intermediate

Conditional type with union types

What is the type of Output here?

Typescript

type Check<T> = T extends number ? "Number" : "Other";
type Output = Check<string | number>;

A "Number" | "Other"

B string | number

C "Other"

D "Number"

💡 Hint

Conditional types distribute over unions.

When a conditional type is applied to a union, it distributes over each member. So Check becomes Check | Check, which is "Other" | "Number".

🔧 Debug

advanced

Identify the error in this conditional type

Which option describes the error in this code snippet?

Typescript

type Example<T> = T extends ? string : number;

A SyntaxError: Missing type after 'extends' keyword

B TypeError: Cannot use conditional type here

C No error, code is valid

D Runtime error: Unexpected token '?'

💡 Hint

Check the syntax after the 'extends' keyword.

The conditional type syntax requires a type after 'extends'. Here, the '?' appears immediately after 'extends' without a type, causing a syntax error.

❓ Predict Output

advanced

Nested conditional types output

What is the type of Result?

Typescript

type Nested<T> = T extends string ? (T extends "hello" ? "Hi" : "Hello") : "Not a string";
type Result = Nested<"hello">;

A "Not a string"

B "Hello"

C string

D "Hi"

💡 Hint

Check the inner conditional when T is "hello".

The outer conditional checks if T extends string, which is true. Then the inner conditional checks if T extends "hello", which is true, so the result is "Hi".

❓ Predict Output

expert

Complex conditional type with infer keyword

What is the type of Extracted?

Typescript

type ExtractReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function fn(): Promise<number> { return Promise.resolve(42); }
type Extracted = ExtractReturnType<typeof fn>;

A any

B number

C Promise<number>

D never

💡 Hint

The infer keyword extracts the return type of the function.

The conditional type extracts the return type of the function fn. Since fn returns Promise, that is the extracted type.