Stop 07 · TypeScriptTopics · 6/12

Intersection

Part of the Frontend Developer Roadmap

In short

Union means 'this or that'. Intersection means 'this AND that'. It lets you combine smaller types into one bigger type that has everything.

A type formed by combining multiple types with `&`, meaning a value must satisfy all of the combined types at once.

The jaadu mascot wears a backpack and a class rep badge while holding an attendance register.

Think of it like this

A student who's also class rep

A class representative is a student with roll number and marks, plus extra duties like taking attendance. They have everything a student has and everything a CR has. That's an intersection: both sets of properties at once.

Watch it happen

Building CourseRecord

CourseRecord
Course
WithId
Timestamps
title
credits
id
createdAt
updatedAt

1/4Course brings title and credits.

The big ideas

What you need to know

Written with &

A & B is a type that has all properties of A and all of B.

Mix small pieces

Build types like Timestamps or WithId once and add them to many other types.

Clashes become never

string & number can't exist, so it becomes never. Watch for the same property with different types.

Similar to extends

interface extends does something similar and gives clearer errors. & also works with type aliases and unions.

See it in code

Walk through the code

ts
1type WithId = { id: string };2type Timestamps = { createdAt: Date; updatedAt: Date };3type Course = { title: string; credits: number };4 5type CourseRecord = Course & WithId & Timestamps;6 7const dsa: CourseRecord = {8  id: "c1",9  title: "Data Structures",10  credits: 4,11  createdAt: new Date(),12  updatedAt: new Date(),13};14 15type Broken = { id: string } & { id: number }; // id becomes never

1/4Three small, reusable building blocks.

CourseRecord needs every field from all three types. Leave out updatedAt and TypeScript will point it out.

Save yourself the pain

Common mistakes

Oops

Mixing up & and |, and expecting A & B to mean 'either one'.

Do this instead

| means one of them. & means all of them together.

Oops

Intersecting types that have the same property with different types.

Do this instead

Rename the field or use Omit to remove it from one side first.

Your mission

Build with blocks

~15 min

Quick check

type A = { name: string }; type B = { age: number }; What must a value of type A & B have?

Go deeper

  1. 1Combine two interfaces (e.g. `Timestamped & Named`) using an intersection type.
  2. 2Compare intersection types to interface extension — often interchangeable.
  3. 3Notice how conflicting property types in an intersection resolve to `never`.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge