Non-distributive conditional types in Typescript - Mini Project: Build & Apply

Non-distributive conditional types

📖 Scenario: Imagine you are building a TypeScript utility to check if a type is exactly string or not, without distributing over unions. This helps when you want to treat unions as a whole instead of their parts.

🎯 Goal: You will create a non-distributive conditional type called IsExactlyString that returns true if the type is exactly string, and false otherwise. Then you will test it with different types.

📋 What You'll Learn

Create a generic type called IsExactlyString that takes a type parameter T.

Use a tuple wrapper to prevent distribution in the conditional type.

Return true if T is exactly string, else false.

Create variables with types using IsExactlyString for string, number, and string | number.

Print the types of these variables to verify the results.

💡 Why This Matters

🌍 Real World

Non-distributive conditional types help when you want to check or transform types exactly without breaking unions into parts. This is useful in libraries and frameworks that rely on precise type behavior.

💼 Career

Understanding advanced TypeScript types like non-distributive conditional types is valuable for frontend and backend developers working with complex type-safe codebases, improving code quality and reducing bugs.

1

Create the generic type IsExactlyString

Create a generic type called IsExactlyString with a type parameter T. Use a conditional type that compares [T] to [string] to avoid distribution. Return true if they are equal, otherwise false.

Typescript

# Your code here

Hint

Wrap the type parameter T and string in tuples to prevent distribution.

2

Create variables to test IsExactlyString

Create three variables: testString with type IsExactlyString, testNumber with type IsExactlyString, and testUnion with type IsExactlyString.

Typescript

type IsExactlyString = [T] extends [string] ? ([string] extends [T] ? true : false) : false;
# Your code here

Hint

Use the generic type IsExactlyString with the exact types string, number, and string | number.

3

Assign values to variables to check type compatibility

Assign true to testString, and false to both testNumber and testUnion.

Typescript

type IsExactlyString = [T] extends [string] ? ([string] extends [T] ? true : false) : false;

let testString: IsExactlyString;
let testNumber: IsExactlyString;
let testUnion: IsExactlyString;
# Your code here

Hint

Assign the boolean values true or false matching the expected results of the type checks.

4

Print the results to verify the non-distributive conditional type

Use console.log to print the values of testString, testNumber, and testUnion.

Typescript

type IsExactlyString = [T] extends [string] ? ([string] extends [T] ? true : false) : false;

let testString: IsExactlyString = true;
let testNumber: IsExactlyString = false;
let testUnion: IsExactlyString = false;

# Your code here

Hint

Print each variable on its own line using console.log.

Practice

1. What does a non-distributive conditional type in TypeScript do differently compared to a distributive conditional type?

easy

A. It converts all types to string before evaluation.

B. It always distributes the condition over each member of the union type.

C. It only works with primitive types, not unions.

D. It evaluates the condition on the entire union type as a whole, not on each member separately.

Solution

1. Step 1: Understand distributive conditional types

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

2. Step 2: Understand non-distributive conditional types

   Non-distributive conditional types evaluate the condition on the entire union type as a single entity, not distributing over members.

3. Final Answer:

   It evaluates the condition on the entire union type as a whole, not on each member separately. -> Option D

4. Quick Check:

   Non-distributive = whole union check [OK]

Hint: Non-distributive means no splitting union, check whole type [OK]

Common Mistakes:

• Thinking conditional always distributes over unions
• Confusing non-distributive with type narrowing
• Assuming it only works on primitives

2. Which syntax correctly defines a non-distributive conditional type in TypeScript?

easy

A. type NonDist<T> = T | string ? true : false;

B. type NonDist<T> = T extends string ? true : false;

C. type NonDist<T> = [T] extends [string] ? true : false;

D. type NonDist<T> = T & string ? true : false;

Solution

1. Step 1: Recognize non-distributive syntax

   Wrapping the type parameter in a tuple, like [T], prevents distribution over unions.

2. Step 2: Compare options

   type NonDist<T> = [T] extends [string] ? true : false; uses [T] extends [string], which is the correct non-distributive syntax. type NonDist<T> = T extends string ? true : false; distributes over unions. Options C and D are invalid conditional syntax.

3. Final Answer:

   type NonDist<T> = [T] extends [string] ? true : false; -> Option C

4. Quick Check:

   Tuple wrapping disables distribution [OK]

Hint: Wrap type in tuple [T] to prevent distribution [OK]

Common Mistakes:

• Not wrapping type in tuple, causing distribution
• Using invalid conditional syntax
• Confusing union with intersection in condition

3. Given the code:

type Test<T> = T extends string ? 'yes' : 'no';
type Result = Test<'a' | number>;

What is the type of Result?

medium

A. 'yes' | 'no'

B. 'yes'

C. 'no'

D. Error

Solution

1. Step 1: Understand distributive conditional types

   Since T is a union 'a' | number, the condition distributes over each member.

2. Step 2: Evaluate each member

   'a' extends string is true, so 'yes'; number extends string is false, so 'no'. Combined result is 'yes' | 'no'.

3. Final Answer:

   'yes' | 'no' -> Option A

4. Quick Check:

   Distributes over union = 'yes' | 'no' [OK]

Hint: Conditional distributes over union unless wrapped [OK]

Common Mistakes:

• Assuming whole union checked at once
• Expecting only 'yes' or only 'no'
• Confusing union with intersection

4. Identify the error in this non-distributive conditional type:

type NonDist<T> = T extends [string] ? true : false;

medium

A. It incorrectly checks if T extends a tuple containing string, not preventing distribution.

B. It correctly prevents distribution by wrapping T in a tuple.

C. It causes a syntax error because of missing brackets.

D. It always returns false regardless of T.

Solution

1. Step 1: Analyze the condition

   The condition checks if T extends [string], a tuple type, not wrapping T.

2. Step 2: Understand distribution prevention

   To prevent distribution, T itself must be wrapped in a tuple: [T] extends [string]. This code does not do that, so distribution is not prevented.

3. Final Answer:

   It incorrectly checks if T extends a tuple containing string, not preventing distribution. -> Option A

4. Quick Check:

   Wrap T, not string, to prevent distribution [OK]

Hint: Wrap T in tuple, not the type to check [OK]

Common Mistakes:

• Wrapping the wrong side of extends
• Confusing tuple with type wrapper
• Assuming syntax error instead of logic error

5. How can you write a non-distributive conditional type that checks if a union type T is exactly string | number (no more, no less)?

hard

A. type Exact<T> = T extends string | number ? true : false;

B. type Exact<T> = [T] extends [string | number] ? ([string | number] extends [T] ? true : false) : false;

C. type Exact<T> = T extends [string | number] ? true : false;

D. type Exact<T> = [T] extends [string] | [number] ? true : false;

Solution

1. Step 1: Prevent distribution with tuple wrapping

   Wrapping T in a tuple [T] prevents distribution over unions.

2. Step 2: Use mutual assignability checks

   Check [T] extends [string | number] and [string | number] extends [T] to ensure exact match, no extra or missing types.

3. Final Answer:

   type Exact<T> = [T] extends [string | number] ? ([string | number] extends [T] ? true : false) : false; -> Option B

4. Quick Check:

   Tuple wrap + mutual extends = exact type check [OK]

Hint: Wrap T and check both extends directions for exact match [OK]

Common Mistakes:

• Not preventing distribution, causing partial matches
• Checking only one extends direction
• Using incorrect tuple wrapping