Conditional type with generics in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a generic type that returns string if the type is number, otherwise boolean.

Typescript

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

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

Anumber

Bstring

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using string instead of number in the condition.

Confusing the true and false branches of the conditional type.

The conditional type checks if T extends number. If yes, it returns string, else boolean.

2fill in blank

medium

Complete the code to create a conditional type that returns T if it extends string, otherwise returns never.

Typescript

type FilterString<T> = T extends [1] ? T : never;

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

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or other types instead of string.

Returning the wrong type in the true branch.

This conditional type returns T only if it extends string. Otherwise, it returns never, which means no valid type.

3fill in blank

hard

Fix the error in the conditional type that should return Array<T> if T extends string, else T.

Typescript

type WrapInArray<T> = T extends [1] ? Array<T> : T;

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

Aany

Bstring

Cboolean

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or other types in the extends clause.

Confusing the true and false branches.

The conditional type checks if T extends string. If yes, it wraps T in an array, else returns T as is.

4fill in blank

hard

Fill the blank to create a conditional type that returns Promise<T> if T extends string, otherwise returns T.

Typescript

type AsyncType<T> = T [1] string ? Promise<T> : T;

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

A==

Bimplements

Cextends=

Dextends

Attempts:

3 left

💡 Hint

Common Mistakes

Using == or extends= which are invalid in this context.

Confusing the order of keywords.

The correct syntax for conditional types uses extends to check if T is a subtype of string.

5fill in blank

hard

Fill all three blanks to define a conditional type that returns string if T extends number, returns boolean if T extends string, otherwise returns never.

Typescript

type MultiCheck<T> = T [1] number ? string : T [2] string ? boolean : [3];

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

Aextends

Bimplements

Cnever

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using implements instead of extends.

Using any instead of never as fallback.

This nested conditional type checks if T extends number, then returns string. Otherwise, it checks if T extends string, then returns boolean. If neither, it returns never.

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