Suggest an edit

Improve this article

Refine the answer for “Intersection types”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. What intersection types are

> **Intersection types (**`&`**)** are a way to **combine several types into one**,
> so that the resulting type contains **all the properties and methods of every combined type**.

In simpler terms:

> Intersection = **a type that matches all the combined types at once.**

---

### Syntax

```javascript
type Combined = TypeA & TypeB;
```

> A variable of type `Combined` now has to match both `TypeA` and `TypeB`.

---

### Example

```javascript
type Person = { name: string };
type Contact = { email: string };

type User = Person & Contact;

const u: User = {
  name: "Tim",
  email: "tim@example.com",
};
```

The `u` object must contain **both** `name` **and** `email`,
because the `User` type combines both.

---

## 2. Intersections with interfaces

Works the same way with `interface` and `type`:

```javascript
interface Position {
  x: number;
  y: number;
}

interface Shape {
  color: string;
}

type ColoredPoint = Position & Shape;

const point: ColoredPoint = {
  x: 10,
  y: 20,
  color: "red",
};
```

---

## 3. Intersections can be made between different structures

```javascript
type Identifiable = { id: number };
type Timestamped = { createdAt: Date };

type Entity = Identifiable & Timestamped;

const post: Entity = {
  id: 1,
  createdAt: new Date(),
};
```

> Now `Entity` requires both `id` and `createdAt`.

---

## 4. Intersecting incompatible types

If the intersected types have **the same field with different types**,
TypeScript considers them **incompatible** (the result is `never`).

```javascript
type A = { value: string };
type B = { value: number };

type C = A & B;

// value would have to be both string and number -> impossible
const c: C = { value: "123" }; // Error
```

> `C["value"]` here has the type `never`,
> meaning an "impossible value".

---

## 5. Intersections and union types (they can be combined)

You can build complex types by combining `|` and `&`.

```javascript
type Admin = { role: "admin"; permissions: string[] };
type User = { role: "user"; name: string };

type Person = (Admin | User) & { id: number };
```

Now:

- `Person` can be either `Admin` or `User`;
- but it **always** has to have `id`.

```javascript
const p1: Person = { id: 1, role: "admin", permissions: ["delete"] };
const p2: Person = { id: 2, role: "user", name: "Tim" };
```

Everything is correct.

---

## 6. Intersections and classes

An intersection can be used to **combine several interfaces** without inheritance:

```javascript
interface Flyable {
  fly(): void;
}

interface Swimmable {
  swim(): void;
}

type Duck = Flyable & Swimmable;

const duck: Duck = {
  fly: () => console.log("Flies"),
  swim: () => console.log("Swims"),
};
```

> The same thing could be done via `interface Duck extends Flyable, Swimmable`,
> but `&` works for `type`, `interface`, and primitives alike.

---

## 7. Intersections with primitives

Yes, intersections are possible for simple types too, but rarely useful:

```javascript
type T = string & number; // never (an impossible type)
```

> Because a value cannot be both a string and a number at the same time.
>
> In this case the intersection results in `never`.

---

## 8. Intersections and generics

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

const result = merge({ name: "Tim" }, { age: 25 });
// result has type { name: string; age: number }
```

> A very common technique - "gluing" objects into one
> with a type containing the combined properties.

---

## 9. Intersections vs. interface inheritance

| Feature | `extends` | `&` (intersection) |
|---|---|---|
| Used with | `interface` | `type` and `interface` |
| Combines structures | Yes | Yes |
| Allows combining `type` + `interface` | No | Yes |
| Mechanism | declarative (inheritance) | structural (composition) |

> In simpler terms:
>
> - `extends` means "inherit from the parent",
> - `&` means "join both".

---

## 10. Where `&` is actually used

- combining data with metadata

```javascript
  type WithId<T> = T & { id: string };
  ```
- combining API interfaces and DTOs

```javascript
  type Request = AuthHeaders & BodyPayload;
  ```
- combining types with options

```javascript
  type Config = BaseConfig & { debug?: boolean };
  ```
- combining class contracts

```javascript
  type Controller = HasLogger & HasRoutes;
  ```

---

## Summary

> **Intersection types (**`&`**)** are a mechanism for combining several types into one,
> that **contains all the properties** of every combined structure.
>
> It is used when an object must **match several types at once**.
>
> The formula is simple:
>
> - `A | B` -> **either A or B**
> - `A & B` -> **both A and B**
>
> Intersections are ideal for:
>
> - extending data structures,
> - combining types from different modules,
> - combining generic types (`T & U`),
> - building powerful compositional types.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts836 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.