Distributive conditional types in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are distributive conditional types in TypeScript?

Distributive conditional types automatically apply a conditional type to each member of a union type separately, then combine the results back into a union.

beginner

How does TypeScript distribute conditional types over unions?

If a conditional type checks a generic type that is a union, TypeScript applies the condition to each union member individually, then unions the results.

beginner

Given <br>type Example<T> = T extends string ? "yes" : "no";<br>What is Example<string | number>?

"yes" | "no" because the conditional type is applied separately to string and number and results are combined.

intermediate

How can you prevent distributive behavior in conditional types?

Wrap the generic type in a tuple like [T] extends [U] ? X : Y to stop distribution over unions.

intermediate

Why are distributive conditional types useful?

They let you write flexible types that automatically handle each union member, making type transformations easier and more powerful.

What happens when a conditional type is applied to a union type in TypeScript?

A The conditional type is applied to each union member separately.

B The conditional type is ignored.

C The conditional type applies only to the first union member.

D The conditional type applies only if the union has one member.

Distributive conditional types apply the condition to each member of the union separately.

How do you stop a conditional type from distributing over a union?

A Use the 'unknown' type.

B Use the 'never' type.

C Use the 'any' type.

D Wrap the type in a tuple like [T].

Wrapping the type in a tuple prevents distribution by making the type no longer a naked type parameter.

What is the result of type R = (string | number) extends string ? true : false;?

A false

B true

C string | number

D never

The conditional is not distributive here because the checked type is not a naked type parameter, so it returns false.

Given type T<T> = T extends number ? 'num' : 'not num';, what is T?

A 'not num'

B 'num'

C 'num' | 'not num'

D string | number

The conditional type distributes over the union, applying to each member separately.

Which of these is a key feature of distributive conditional types?

A They convert types to strings.

B They automatically apply conditions to each union member.

C They only work with arrays.

D They prevent type inference.

Distributive conditional types apply the condition to each member of a union automatically.

Explain what distributive conditional types are and how they work with union types in TypeScript.

Think about how a condition checks each part of a union separately.

Describe a method to prevent a conditional type from distributing over a union type and why you might want to do that.

Consider how wrapping changes the type shape.