Union vs intersection mental model in Typescript - Hands-On Comparison

Union vs Intersection Mental Model in TypeScript

📖 Scenario: Imagine you are building a simple system to describe different types of pets and their characteristics. You want to understand how to combine types using union and intersection in TypeScript to model pets that can have multiple traits or belong to multiple categories.

🎯 Goal: You will create TypeScript types using union and intersection to represent pets with different features. Then, you will write code to see how these types behave when combined.

📋 What You'll Learn

Create union and intersection types with exact names and values

Use variables with explicit types to demonstrate union and intersection

Write code that shows the difference in allowed values for union and intersection types

Print the results to the console exactly as instructed

💡 Why This Matters

🌍 Real World

Understanding union and intersection types helps when modeling complex data in apps, like user roles or product features that can overlap or be exclusive.

💼 Career

Many programming jobs require working with TypeScript or similar typed languages where combining types correctly is important for safe and clear code.

1

Create basic pet types

Create two TypeScript types called Cat and Dog. Cat should have a property meows set to true. Dog should have a property barks set to true. Use type aliases exactly as type Cat = { meows: true } and type Dog = { barks: true }.

Typescript

# Your code here

Hint

Use type keyword to create type aliases with exact property names and values.

2

Create union and intersection types

Create a union type called PetUnion that is either Cat or Dog. Create an intersection type called PetIntersection that combines Cat and Dog. Use exactly type PetUnion = Cat | Dog and type PetIntersection = Cat & Dog.

Typescript

type Cat = { meows: true };
type Dog = { barks: true };
# Your code here

Hint

Use | for union and & for intersection between types.

3

Create variables with union and intersection types

Create a variable called pet1 of type PetUnion and assign it an object with meows: true. Create a variable called pet2 of type PetIntersection and assign it an object with both meows: true and barks: true. Use exactly const pet1: PetUnion = { meows: true } and const pet2: PetIntersection = { meows: true, barks: true }.

Typescript

type Cat = { meows: true };
type Dog = { barks: true };
type PetUnion = Cat | Dog;
type PetIntersection = Cat & Dog;
# Your code here

Hint

Assign objects matching the union and intersection types exactly.

4

Print the variables to see the difference

Write two console.log statements to print pet1 and pet2. Use exactly console.log(pet1) and console.log(pet2).

Typescript

type Cat = { meows: true };
type Dog = { barks: true };
type PetUnion = Cat | Dog;
type PetIntersection = Cat & Dog;

const pet1: PetUnion = { meows: true };
const pet2: PetIntersection = { meows: true, barks: true };

# Your code here

Hint

Use console.log to print the variables exactly.

Practice

1. Which statement best describes a union type in TypeScript?

easy

A. A value must have all combined types, like string & number.

B. A value can be one type or another, like string | number.

C. It restricts a value to only one specific type.

D. It creates a new type by excluding some properties.

Solution

1. Step 1: Understand union type meaning

   A union type means a value can be one of several types, for example, string | number means the value can be either a string or a number.

2. Step 2: Compare with intersection type

   An intersection type requires a value to have all combined types, which is different from union. So a value can be one type or another, like string | number, correctly describes union.

3. Final Answer:

   A value can be one type or another, like string | number. -> Option B

4. Quick Check:

   Union = one of multiple types [OK]

Hint: Union means one type OR another, intersection means ALL types [OK]

Common Mistakes:

• Confusing union with intersection
• Thinking union requires all types simultaneously
• Mixing up syntax symbols | and &

2. Which of the following is the correct syntax for an intersection type combining A and B?

easy

A. type C = A | B;

B. type C = A, B;

C. type C = A + B;

D. type C = A & B;

Solution

1. Step 1: Recall intersection syntax

   Intersection types use the ampersand & symbol to combine types, meaning the value must satisfy both types.

2. Step 2: Identify correct syntax

   type C = A & B; uses A & B, which is the correct syntax for intersection types in TypeScript.

3. Final Answer:

   type C = A & B; -> Option D

4. Quick Check:

   Intersection uses & symbol [OK]

Hint: Intersection uses & symbol, union uses | symbol [OK]

Common Mistakes:

• Using | instead of & for intersection
• Using invalid operators like + or comma
• Confusing type alias syntax

3. What is the type of variable value after this assignment?

type A = { name: string };
type B = { age: number };

let value: A | B = { name: "Alice", age: 30 };

medium

A. Error: value must be either A or B, not both.

B. Valid: value must have only name property.

C. Valid: value has both name and age properties.

D. Error: value must have only age property.

Solution

1. Step 1: Understand union type assignment

   The variable value is declared as A | B, meaning it can be either type A or type B.

2. Step 2: Check assigned object

   The assigned object has both name and age properties, which does not strictly satisfy either A or B alone, so it is not valid as a union type.

3. Final Answer:

   Error: value must be either A or B, not both. -> Option A

4. Quick Check:

   Union requires value to match one type exactly [OK]

Hint: Union requires value to match one type exactly [OK]

Common Mistakes:

• Thinking union allows objects with all properties combined
• Confusing union with intersection requirements
• Assuming extra properties are allowed in union

4. Identify the error in this TypeScript code:

type A = { name: string };
type B = { age: number };

let person: A & B = { name: "Bob" };

medium

A. Syntax error in type declaration.

B. Incorrect use of union instead of intersection.

C. Missing property age in the object assigned to person.

D. Extra property name not allowed.

Solution

1. Step 1: Understand intersection type requirements

   An intersection type A & B requires the value to have all properties from both types A and B.

2. Step 2: Check assigned object properties

   The object assigned has only name property but is missing age, so it does not satisfy the intersection type.

3. Final Answer:

   Missing property age in the object assigned to person. -> Option C

4. Quick Check:

   Intersection requires all properties present [OK]

Hint: Intersection needs all properties present [OK]

Common Mistakes:

• Thinking intersection allows partial properties
• Confusing union and intersection requirements
• Ignoring missing properties error

5. Given these types:

type Name = { name: string };
type Age = { age: number };
type Contact = { email: string };

// Which type correctly represents a value that must have a name and either age or email?

// Choose the correct type for Person:

hard

A. type Person = Name & (Age | Contact);

B. type Person = (Name & Age) | Contact;

C. type Person = Name | Age & Contact;

D. type Person = Name & Age & Contact;

Solution

1. Step 1: Analyze requirement

   The value must have a name property and either an age or email property.

2. Step 2: Translate to types

   This means the type must be Name AND (either Age OR Contact), which is Name & (Age | Contact).

3. Step 3: Check options

   type Person = Name & (Age | Contact); matches this exactly. Other options either change the logic or require all three properties.

4. Final Answer:

   type Person = Name & (Age | Contact); -> Option A

5. Quick Check:

   Name AND (Age OR Contact) = Name & (Age | Contact) [OK]

Hint: Use parentheses to combine union and intersection correctly [OK]

Common Mistakes:

• Ignoring parentheses changing logic
• Mixing order of union and intersection
• Choosing all properties instead of either/or