🔗 TypeScript — Intersection Types Explained with Examples

🧲 Introduction – What Are Intersection Types in TypeScript?

In TypeScript, intersection types allow you to combine multiple types into one. They’re useful when an object needs to satisfy multiple contracts or inherit characteristics from multiple sources. You can think of them as a way to “merge” types and enforce all the rules simultaneously.

🎯 In this guide, you’ll learn:

• What intersection types are and how to write them
• How they differ from union types
• Practical examples using interfaces, objects, and function types
• Best practices and use cases

---

🔗 What Is an Intersection Type?

An intersection type combines two or more types into one using the & operator. A value of an intersection type must satisfy all the individual types.

✅ Syntax:

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

type C = A & B; // Must have both 'name' and 'age'

✅ Example:

const person: C = {
  name: "Alice",
  age: 30
};

✅ Explanation:

• C requires the properties of both A and B.
• person must have both name and age.

---

🧩 Intersection of Interfaces

You can intersect interfaces just like you do with type aliases.

interface Employee {
  employeeId: number;
}

interface User {
  name: string;
}

type Staff = Employee & User;

const staffMember: Staff = {
  employeeId: 101,
  name: "John Doe"
};

✅ Explanation:

• Staff includes both Employee and User properties.
• This helps in modeling complex data types shared across modules.

---

🔄 Intersection vs Union Types

| Feature | Union Type (|) | Intersection Type (&) |
|——————–|——————————————|——————————————-|
| Meaning | Accepts values that match any type | Accepts values that match all types |
| Usage | For flexible/optional logic | For strict/shared structures |
| Example | string | number | {name: string} & {age: number} |
| Valid value | Either a string or number | Must be both a string and number (combined) |

---

🧠 Use Cases for Intersection Types

🔹 1. Merging Objects

type Name = { name: string };
type Contact = { email: string };

type ContactCard = Name & Contact;

const contact: ContactCard = {
  name: "Alice",
  email: "alice@example.com"
};

🔹 2. Combining Function Constraints

type Logger = { log: () => void };
type ErrorHandler = { handleError: (msg: string) => void };

type Service = Logger & ErrorHandler;

const apiService: Service = {
  log() {
    console.log("Logging");
  },
  handleError(msg) {
    console.error("Error:", msg);
  }
};

🔹 3. Generic Constraints

function merge<T extends object, U extends object>(a: T, b: U): T & U {
  return { ...a, ...b };
}

const merged = merge({ id: 1 }, { name: "Merged" });
console.log(merged); // { id: 1, name: "Merged" }

---

⚠️ Things to Watch Out For

❌ Conflicting Types in Intersections

type A = { x: number };
type B = { x: string };

// type C = A & B; ❌ Error: Type 'string' is not assignable to type 'number'

🚫 If two types define the same property with conflicting types, the intersection becomes impossible.

---

💡 Best Practices

• ✅ Use intersection types to compose behaviors and structures
• ✅ Combine multiple interfaces or types for clean, reusable models
• ✅ Avoid intersecting types with overlapping but conflicting property types
• ✅ Use with generics to enhance flexibility in reusable utilities

---

📌 Summary – Recap & Next Steps

Intersection types are a powerful feature in TypeScript that help you compose types from multiple sources, leading to cleaner, DRY code and stronger type enforcement.

🔍 Key Takeaways:

• Use & to combine multiple types into one
• All properties from all intersected types are required
• Great for merging interfaces and enforcing multiple constraints
• Avoid conflicts between intersected property types

⚙️ Real-world relevance: Used in data modeling, middleware patterns, React props extension, and service composition.

---

❓ FAQs – Intersection Types in TypeScript

❓ What happens if two intersected types have the same property?
✅ If the property types are the same, no issue. If they’re different, it’s an error.

❓ Can you intersect interfaces and type aliases?
✅ Yes. Both can be used with the & operator.

❓ How is an intersection different from a union?
🔀 A union accepts either type; an intersection requires all types simultaneously.

❓ Are intersection types available at runtime?
❌ No. TypeScript types are only for compile-time checks—they don’t exist in the compiled JS output.

---

Share Now :