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.

Practice

1. What does a conditional type in TypeScript do?
T extends U ? X : Y

easy

A. Checks if T equals U and returns a boolean

B. Chooses type X if T is assignable to U, otherwise type Y

C. Creates a new type by combining T and U

D. Defines a function that returns X or Y

Solution

1. Step 1: Understand the conditional type syntax

   The syntax T extends U ? X : Y means if type T can be assigned to type U, then use type X.

2. Step 2: Interpret the meaning

   If T is not assignable to U, then the type becomes Y instead.

3. Final Answer:

   Chooses type X if T is assignable to U, otherwise type Y -> Option B

4. Quick Check:

   Conditional type picks between X and Y based on T extends U [OK]

Hint: Remember: condition ? trueType : falseType [OK]

Common Mistakes:

• Thinking it returns a boolean value
• Confusing extends with equality check
• Assuming it creates a function

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

easy

A. type Result = T extends U then X else Y;

B. type Result = if (T extends U) X else Y;

C. type Result = T extends U ? X : Y;

D. type Result = T ? U : X : Y;

Solution

1. Step 1: Recall the correct conditional type syntax

   TypeScript uses type Result = T extends U ? X : Y; to define conditional types.

2. Step 2: Identify incorrect options

   Options A, B, and C use invalid syntax not supported by TypeScript.

3. Final Answer:

   type Result = T extends U ? X : Y; -> Option C

4. Quick Check:

   Correct conditional type syntax uses ? and : [OK]

Hint: Look for ? and : after extends keyword [OK]

Common Mistakes:

• Using if-else keywords inside type definitions
• Misplacing question mark or colon
• Writing 'then' instead of '?'

3. What is the resulting type of this code?

type Check<T> = T extends string ? number : boolean;
type Result = Check<'hello'>;

medium

A. number

B. boolean

C. string

D. 'hello'

Solution

1. Step 1: Analyze the conditional type Check<T>

   If T extends string, then the type is number; otherwise boolean.

2. Step 2: Substitute T with 'hello'

   'hello' is a string literal, so it extends string, making the type number.

3. Final Answer:

   number -> Option A

4. Quick Check:

   'hello' extends string -> number [OK]

Hint: Check if type matches condition, then pick true branch [OK]

Common Mistakes:

• Confusing the output type with input type
• Assuming literal types don't extend their base types
• Choosing boolean instead of number

4. Identify the error in this conditional type:

type Example<T> = T extends number ? 'num' : 'not num'

medium

A. Conditional types cannot return string literals

B. Incorrect use of extends keyword

C. Missing semicolon after type definition

D. No error, syntax is correct

Solution

1. Step 1: Review the conditional type syntax

   The syntax type Example<T> = T extends number ? 'num' : 'not num' is valid in TypeScript.

2. Step 2: Check for syntax errors

   Semicolon after type alias is optional; string literals are valid return types.

3. Final Answer:

   No error, syntax is correct -> Option D

4. Quick Check:

   Conditional types can return string literals [OK]

Hint: Conditional types allow any valid type as result [OK]

Common Mistakes:

• Expecting semicolon is mandatory
• Thinking extends is only for classes
• Believing string literals can't be types

5. Given this conditional type:

type Flatten<T> = T extends any[] ? T[number] : T;

What is the type of Flatten<string[] | number>?

hard

A. string | number

B. string[] | number

C. string

D. number

Solution

1. Step 1: Understand the conditional type Flatten<T>

   If T is an array type, it returns the element type (T[number]), else returns T itself.

2. Step 2: Apply Flatten to union type string[] | number

   Conditional types distribute over unions, so Flatten<string[] | number> = Flatten<string[]> | Flatten<number> = string | number.

3. Final Answer:

   string | number -> Option A

4. Quick Check:

   Conditional types distribute over unions [OK]

Hint: Remember conditional types distribute over union types [OK]

Common Mistakes:

• Not distributing over union types
• Returning array type instead of element type
• Confusing T[number] with T