Conditional type with generics in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of conditional type with string generic

What is the output of the following TypeScript code when TestType<'hello'> is used?

Typescript

type TestType<T> = T extends string ? 'string type' : 'other type';

const result: TestType<'hello'> = 'string type';
console.log(result);

A "other type"

B "string type"

C Type error: Type 'string' is not assignable to 'other type'

D undefined

💡 Hint

Check if the generic type extends string or not.

The generic type 'hello' extends string, so the conditional type resolves to 'string type'.

❓ Predict Output

intermediate

Conditional type with union generic

What is the type of Result in the code below?

Typescript

type Conditional<T> = T extends number ? 'number' : 'not number';
type Result = Conditional<string | number>;

// What is Result?

A "number" | "not number"

B "number"

C "not number"

D string | number

💡 Hint

Conditional types distribute over unions.

Conditional types distribute over union types, so Result becomes 'number' | 'not number'.

🔧 Debug

advanced

Why does this conditional type cause an error?

Identify the error in this TypeScript code and what error it produces.

Typescript

type Check<T> = T extends { id: number } ? T : never;

const obj: Check<{ name: string }> = { name: 'Alice' };

A Type error: Type '{ name: string; }' is not assignable to type 'never'.

B Syntax error: Missing semicolon.

C No error, code compiles fine.

D Runtime error: Property 'id' is undefined.

💡 Hint

Check what happens when the generic type does not extend the condition.

Since { name: string } does not extend { id: number }, Check<{ name: string }> becomes never, so assigning an object causes a type error.

📝 Syntax

advanced

Which option correctly defines a conditional generic type?

Choose the option that correctly defines a conditional type with generics to check if T is assignable to string.

A type IsString<T> = T ? string : false;

B type IsString<T> = if T extends string then true else false;

C type IsString<T> = T extends string ? 'yes';

D type IsString<T> = T extends string ? true : false;

💡 Hint

Look for correct TypeScript conditional type syntax.

Option D uses the correct syntax: 'T extends string ? true : false'. Others have syntax errors or incomplete expressions.

🚀 Application

expert

What is the output of this complex conditional generic type?

Given the code below, what is the type of Result?

Typescript

type Flatten<T> = T extends Array<infer U> ? U : T;

type Result = Flatten<string[] | number>;

A never

B string[] | number

C string | number

D string

💡 Hint

Remember conditional types distribute over unions and infer extracts the array element type.

Flatten distributes over the union: Flatten is string, Flatten is number, so Result is string | number.

Practice

1. What does a conditional type with generics in TypeScript do?

easy

A. It creates a new variable with a fixed type.

B. It selects one type or another based on a condition using generic types.

C. It runs a function only if a condition is true.

D. It converts all types to strings.

Solution

1. Step 1: Understand conditional types

   Conditional types choose between two types depending on a condition.

2. Step 2: Understand generics

   Generics allow types to be flexible and work with many types.

3. Final Answer:

   It selects one type or another based on a condition using generic types. -> Option B

4. Quick Check:

   Conditional type with generics = Selects type based on condition [OK]

Hint: Remember: conditional types pick types, generics make them flexible [OK]

Common Mistakes:

• Thinking conditional types run code instead of selecting types
• Confusing generics with fixed types
• Assuming conditional types convert values

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

easy

A. type Result<T> = T extends string ? number : boolean;

B. function Result<T> = T ? number : boolean;

C. let Result<T> = T extends string ? number : boolean;

D. class Result<T> = T extends string ? number : boolean;

Solution

1. Step 1: Identify correct conditional type syntax

   Conditional types use the syntax: type Name<T> = T extends Condition ? TrueType : FalseType;

2. Step 2: Check each option

   type Result<T> = T extends string ? number : boolean; matches the correct syntax. Others use function, let, or class incorrectly.

3. Final Answer:

   type Result<T> = T extends string ? number : boolean; -> Option A

4. Quick Check:

   Correct conditional type syntax = type Result<T> = T extends string ? number : boolean; [OK]

Hint: Conditional types use 'type' keyword with generic and '? :' [OK]

Common Mistakes:

• Using function or class instead of type
• Missing the 'extends' keyword
• Using let instead of type

3. What is the type of Result<string> given this code?

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

medium

A. boolean

B. never

C. number

D. string

Solution

1. Step 1: Check the condition for T = string

   The condition is T extends number. Since string does not extend number, the condition is false.

2. Step 2: Determine the resulting type

   Because the condition is false, the type after the colon is chosen, which is string.

3. Final Answer:

   string -> Option D

4. Quick Check:

   string extends number? No, so type = string [OK]

Hint: Check if generic type matches condition; else pick false type [OK]

Common Mistakes:

• Assuming string extends number
• Choosing the true type instead of false
• Confusing extends with assignment

4. Identify the error in this conditional type with generics:

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

medium

A. Incorrect use of generic parameter

B. Missing colon ':' after condition

C. Missing type after 'extends' keyword

D. Using 'type' instead of 'interface'

Solution

1. Step 1: Analyze the conditional type syntax

   The syntax requires a type after 'extends' to check the condition.

2. Step 2: Identify the missing part

   Here, 'T extends ?' is missing the type to compare with, causing a syntax error.

3. Final Answer:

   Missing type after 'extends' keyword -> Option C

4. Quick Check:

   Conditional type needs a type after 'extends' [OK]

Hint: Always put a type after 'extends' in conditional types [OK]

Common Mistakes:

• Leaving out the type after 'extends'
• Confusing '?' placement
• Using interface instead of type for conditional types

5. Given this code, what is the type of Output?

type IsArray<T> = T extends any[] ? 'array' : 'not array';
type Output = IsArray<string[] | number>;

hard

A. 'array' | 'not array'

B. 'array'

C. 'not array'

D. string[] | number

Solution

1. Step 1: Understand conditional type with union

   When conditional types receive a union, they distribute over each member separately.

2. Step 2: Apply condition to each union member

   string[] extends any[]? Yes, so 'array'. number extends any[]? No, so 'not array'.

3. Step 3: Combine results

   The result is the union of both: 'array' | 'not array'.

4. Final Answer:

   'array' | 'not array' -> Option A

5. Quick Check:

   Conditional distributes over union = 'array' | 'not array' [OK]

Hint: Conditional types distribute over unions automatically [OK]

Common Mistakes:

• Assuming single result for union input
• Forgetting distribution over union types
• Confusing output with input types