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.