Suggest an edit

Improve this article

Refine the answer for “How do you combine multiple 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. Combining types with `|` **(Union Type)**

> A **union** means: a value can be **one of several types**.

---

### Example 1: basic types

```javascript
type ID = string | number;

let userId: ID;

userId = 42;      // number
userId = "abc123"; // string
userId = true;     // Error
```

> `userId` can be either `string` or `number`, but nothing else.

---

### Example 2: several structures

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

type Person = Admin | User;

const p1: Person = { role: "admin", permissions: ["delete", "edit"] }; // fine
const p2: Person = { role: "user", name: "Tim" };                       // fine
```

> TypeScript will make sure the object matches **at least one** of the shapes.

---

### How to distinguish types inside a union

You can use **type narrowing**:

```javascript
function printRole(person: Person) {
  if (person.role === "admin") {
    console.log(person.permissions); // TS understands this is Admin
  } else {
    console.log(person.name); // TS understands this is User
  }
}
```

---

## 2. Combining types with `&` **(Intersection Type)**

> An **intersection** merges **all fields from several types**.
> An object must match **all the combined types at once**.

---

### Example 1: combining structures

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

type User = Person & Contact;

const u: User = { name: "Tim", email: "tim@example.com" }; // both fields are required
```

> Here `User` includes properties **from both types**: `name` and `email`.

---

### Example 2: combining several interfaces and types

```javascript
interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

type Identifiable = { id: number };

type Entity = Timestamped & Identifiable;

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

> `Entity` is now a "merge" of two structures.

---

### Example of an incompatible intersection

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

type C = A & B; // value must be both string and number at once -> never

const c: C = { value: "test" }; // Error
```

> If the fields have different types, TypeScript cannot merge them,
> the result is the `never` type (an impossible type).

---

## 3. Union + Intersection together

You can combine both approaches:

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

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

> Here `Person` must have an `id` field,
> and must also match either `Admin` or `User`.

Usage example:

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

---

## 4. Why combine types

**Union (**`|`**)** is for when data comes in **different shapes** (variants).
**Intersection (**`&`**)** is for when you need to **merge several structures** together.

---

## 5. Real-life examples

| Scenario | What to use | Example |
|---|---|---|
| `id` can be a string or a number | `string \| number` | `type ID = string |
| A user can be `Admin` or `User` | `Admin \| User` | union |
| An object combines fields of `User` and `Timestamped` | `User & Timestamped` | intersection |
| An API response can be successful or an error | `SuccessResponse \| ErrorResponse` | union |
| A model includes properties from several base types | `Base & Metadata & Permissions` | intersection |

---

## Summary

> In TypeScript you can combine types in two ways:
>
> A **union (**`|`**)** is *"or"* -> one of several variants
> An **intersection (**`&`**)** is *"and"* -> merges everything into one type
>
> Combine them to describe complex structures:
>
> ```javascript
> type Person = (Admin | User) & { id: number };
> ```

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.