Going Deeper›Extra· 30 min read

Intersection Types: Combining Shapes with &

A union (|) says "this OR that"; an intersection (&) says "this AND that" — it merges several shapes into one.

What you will learn

Understand how & differs from |
Merge two object shapes into one combined type
Use intersection to add fields to an existing type

AND, not OR

You already know the union |, which means "one OR the other" — a value matches *any* of the listed types. An intersection, written with an ampersand &, is the opposite idea: it means "this AND that at the same time". A value must satisfy *every* shape you combine.

Think of it like job requirements. A union job posting says "we will hire a designer OR a developer". An intersection posting says "we need someone who is a designer AND a developer" — one person who has both sets of skills.

Merging two object shapes

The most common use is gluing two object types together. Here we describe a Person and an Employee separately, then make Staff that has the properties of both:

Staff must have every property from both Person and Employee

type Person = {
  name: string;
  age: number;
};

type Employee = {
  employeeId: number;
  department: string;
};

type Staff = Person & Employee;

const asha: Staff = {
  name: 'Asha',
  age: 28,
  employeeId: 101,
  department: 'Engineering'
};

console.log(asha.name + ' works in ' + asha.department);

Note: Output: Asha works in Engineering Because Staff is Person & Employee, an object of type Staff must include all four properties — name, age, employeeId and department. Leave any one out and TypeScript reports a missing-property error.

A property missing? That is an error

The safety comes from the word AND. The object below is missing department, so it is not a complete Staff:

An intersection demands every property from every part

type Staff = Person & Employee;

const ben: Staff = {
  name: 'Ben',
  age: 31,
  employeeId: 102
};   // department is missing!

Note: Output: Error: Property 'department' is missing in type ... but required in type 'Staff'. An intersection is strict: to be a Staff you must satisfy Person AND Employee fully. The missing department breaks the Employee half.

A realistic pattern: adding fields to a known shape

Intersections shine when you want to take an existing type and bolt on a few extra fields. Here we reuse a BaseProduct and add timestamps to make a SavedProduct — without repeating the original properties:

Reusing BaseProduct and adding Timestamps with &

type BaseProduct = {
  name: string;
  price: number;
};

type Timestamps = {
  createdAt: string;
  updatedAt: string;
};

type SavedProduct = BaseProduct & Timestamps;

const item: SavedProduct = {
  name: 'Keyboard',
  price: 1200,
  createdAt: '2026-01-10',
  updatedAt: '2026-02-01'
};

console.log(item.name + ' costs ' + item.price);

Note: Output: Keyboard costs 1200 SavedProduct carries every field of BaseProduct plus every field of Timestamps. You wrote each shape once and combined them — if BaseProduct ever changes, SavedProduct updates automatically.

Union vs intersection at a glance

Operator	Meaning	An object must...
`A \| B` (union)	A OR B	match at least one of the shapes
`A & B` (intersection)	A AND B	match every property of both shapes

Tip: A handy memory aid: with & the result has more required properties (both shapes combined), while with | you can safely use only the properties the shapes share. & adds; | overlaps.

Watch out: Intersecting types whose properties clash can backfire. type X = { id: number } & { id: string } makes id need to be a number AND a string at once — impossible, so its type becomes never and nothing can satisfy it. Only intersect shapes that fit together.

Q. What does type Staff = Person & Employee require of a Staff object?

Answer: An intersection (&) combines shapes: a Staff object must satisfy every property of Person and every property of Employee at the same time.

✍️ Practice

Make type Animal = { name: string } and type Pet = { owner: string }, then type HousePet = Animal & Pet and a matching object.
Create a WithId = { id: number } type and intersect it with a User shape to build a StoredUser.

🏠 Homework

Design a Contact type and a SocialLinks type, combine them with & into a FullProfile, and create one valid profile object. Note in a sentence why & was the right choice over |.