Distributive conditional types in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a conditional type that returns 'string' if T is 'string', otherwise 'number'.

Typescript

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

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

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' instead of 'string' in the extends clause.

Confusing the order of true and false branches.

The conditional type checks if T extends string. If yes, it returns 'string', otherwise 'number'.

2fill in blank

medium

Complete the code to create a distributive conditional type that extracts the element type from an array type.

Typescript

type ElementType<T> = T extends [1] ? T[number] : T;

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

Aany[]

Bobject

Creadonly any[]

DArray<any>

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Array' instead of 'any[]' which may cause distributive behavior issues.

Not using T[number] to extract element type.

The conditional type checks if T extends an array type any[]. If yes, it returns the element type T[number], otherwise returns T itself.

3fill in blank

hard

Fix the error in the conditional type that should distribute over union types to return 'true' if T is 'string' or 'number', otherwise 'false'.

Typescript

type IsStringOrNumber<T> = T extends [1] ? true : false;

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

Astring | boolean

Bstring | number

Cnumber | boolean

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string | boolean' which excludes 'number'.

Using only 'string' or 'number' alone, missing the union.

The conditional type distributes over union types. To check if T is string or number, use string | number in the extends clause.

4fill in blank

hard

Fill both blanks to create a conditional type that returns the keys of T whose values extend string.

Typescript

type StringKeys<T> = { [K in keyof T]: T[K] [1] string ? K : never }[[2]];

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

Aextends

Bkeyof T

CT

Din

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'in' instead of 'extends' in the conditional check.

Using 'T' instead of 'keyof T' in the final index.

This mapped type iterates over keys K of T. For each key, it checks if the value type T[K] extends string. If yes, it keeps the key K, otherwise never. Finally, it indexes with keyof T to get a union of keys with string values.

5fill in blank

hard

Fill all three blanks to create a distributive conditional type that converts union members to their array types, otherwise returns never.

Typescript

type ToArray<T> = T extends [1] ? [2][] : [3];

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

Aany

BT

Cnever

Dunknown

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'any' instead of 'unknown' which may affect distributive behavior.

Returning 'T' instead of 'T[]' for the true branch.

This conditional type checks if T extends unknown (which is always true, triggering distributive behavior). It then converts each member of the union T to an array type T[]. Otherwise, it returns never.

Practice

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

easy

A. Applies the condition separately to each member of the union type

B. Applies the condition once to the entire union type as a whole

C. Always returns the true branch X regardless of T

D. Always returns the false branch Y regardless of T

Solution

1. Step 1: Understand conditional types with unions

   When T is a union, TypeScript distributes the condition over each member separately.

2. Step 2: Apply distributive behavior

   Each member of T is checked against U individually, returning X or Y per member.

3. Final Answer:

   Applies the condition separately to each member of the union type -> Option A

4. Quick Check:

   Distributive conditional types = separate checks per union member [OK]

Hint: Remember: conditional types split unions into parts [OK]

Common Mistakes:

• Thinking the condition applies once to the whole union
• Assuming it always returns true or false branch
• Confusing distributive with non-distributive conditional types

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

easy

A. type Result<T> = if (T extends string) number else boolean;

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

C. type Result<T> = T ? number : boolean;

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

Solution

1. Step 1: Recall correct conditional type syntax

   Conditional types use T extends U ? X : Y syntax in TypeScript.

2. Step 2: Match syntax with options

   type Result<T> = T extends string ? number : boolean; matches the correct syntax; others use invalid or incorrect syntax.

3. Final Answer:

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

4. Quick Check:

   Conditional types use extends ? : syntax [OK]

Hint: Look for extends ? : pattern in type definitions [OK]

Common Mistakes:

• Using if-else instead of conditional operator
• Missing the extends keyword
• Using arrow functions incorrectly in type definitions

3. Given the type:

type FilterString<T> = T extends string ? T : never;
type Result = FilterString<'a' | 1 | 'b' | true>;

What is the type of Result?

medium

A. never

B. 'a' | 1 | 'b' | true

C. 'a' | 'b'

D. string

Solution

1. Step 1: Apply distributive conditional type to each union member

   Each member is checked: 'a' extends string (true), 1 extends string (false), 'b' extends string (true), true extends string (false).

2. Step 2: Collect true branch results

   Only 'a' and 'b' remain; others become never and are removed from union.

3. Final Answer:

   'a' | 'b' -> Option C

4. Quick Check:

   FilterString filters strings only = 'a' | 'b' [OK]

Hint: Distributive types filter unions by returning never for false cases [OK]

Common Mistakes:

• Thinking the whole union is returned unchanged
• Confusing never with empty string
• Assuming the result is just string instead of filtered literals

4. Identify the error in this distributive conditional type:

type ExtractNumber<T> = [T] extends [number] ? T : never;
type Result = ExtractNumber<'a' | 1 | 2>;

medium

A. The condition is wrapped in a tuple, so distribution does not occur

B. The syntax is invalid because of missing extends keyword

C. The type will always return never

D. The union type is not allowed in conditional types

Solution

1. Step 1: Understand tuple wrapping effect

   Wrapping T in a tuple disables distributive behavior in conditional types.

2. Step 2: Analyze impact on ExtractNumber

   Since distribution is off, the whole union is checked at once, so 'a' | 1 | 2 extends number is false, returning never.

3. Final Answer:

   The condition is wrapped in a tuple, so distribution does not occur -> Option A

4. Quick Check:

   Tuple wrapping disables distributive conditional types [OK]

Hint: Tuple brackets stop distribution in conditional types [OK]

Common Mistakes:

• Assuming distribution still happens with tuple wrapping
• Confusing syntax error with logic error
• Thinking union types are not allowed in conditional types

5. How can you create a type that converts a union of types T into a union of their array types using distributive conditional types?
Choose the correct type definition.

hard

A. type ToArray<T> = T extends any[] ? T : never;

B. type ToArray<T> = T extends any ? T[] : never;

C. type ToArray<T> = T[];

D. type ToArray<T> = [T] extends [any] ? T[] : never;

Solution

1. Step 1: Understand distributive conditional type for mapping

   Using T extends any ? T[] : never applies the array transformation to each union member separately.

2. Step 2: Compare options

   type ToArray<T> = T extends any ? T[] : never; correctly distributes and converts each member to an array type. type ToArray<T> = [T] extends [any] ? T[] : never; disables distribution by tuple wrapping. type ToArray<T> = T[]; wraps the whole union as an array, not each member. type ToArray<T> = T extends any[] ? T : never; filters arrays, not converts.

3. Final Answer:

   type ToArray<T> = T extends any ? T[] : never; -> Option B

4. Quick Check:

   Distributive conditional types map unions member-wise [OK]

Hint: Use T extends any ? to distribute over unions [OK]

Common Mistakes:

• Wrapping T in tuple disables distribution
• Using T[] directly converts whole union, not members
• Confusing filtering with mapping in conditional types