Suggest an edit

Improve this article

Refine the answer for “What is the difference between types and interfaces?”. 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. The general idea

| What both do | How it works |
|---|---|
| Describe an object's structure | `{ id: number; name: string }` |
| Check compatibility by shape (structural typing) | The presence of the required fields is checked |
| Do not exist at runtime | Removed during compilation |
| Help the IDE with autocomplete | Show fields and types |

---

## 2. The main difference

| Difference | **interface** | **type** |
|---|---|---|
| Main purpose | Describing the **structure of objects** and **class contracts** | Creating **aliases** for any types |
| Extending other types | Via `extends` | Via `&` (intersection) |
| Merging declarations | Possible | Not possible |
| Union and primitives | No | Yes |
| Tuple and function types | Partially | Fully |
| Implementation by a class (`implements`) | Yes | Yes |
| Used for APIs and data models | Often | Also, but with generic types |

---

## 3. Examples

### `interface` describes an **object's structure**

```javascript
interface User {
  id: number;
  name: string;
}

const u: User = { id: 1, name: "Tim" };
```

---

### `type` creates a **type alias**

```javascript
type User = {
  id: number;
  name: string;
};

const u: User = { id: 1, name: "Tim" };
```

> In this simple example there is no difference - but the distinctions start further on.

---

## 4. Inheritance and extension

### Interfaces via `extends`

```javascript
interface Person {
  name: string;
}

interface Employee extends Person {
  company: string;
}

const e: Employee = { name: "Tim", company: "Acme" };
```

---

### Types via intersection (`&`)

```javascript
type Person = { name: string };
type Employee = Person & { company: string };

const e: Employee = { name: "Tim", company: "Acme" };
```

> The behavior is similar, but the syntax is different.

---

## 5. Merging interfaces

Interfaces with the same name **merge**:

```javascript
interface User {
  id: number;
}

interface User {
  name: string;
}

const user: User = { id: 1, name: "Tim" }; // OK
```

Types cannot do this:

```javascript
type User = { id: number };
type User = { name: string }; // Error: duplicate identifier
```

> That's why interfaces are often used to **extend external libraries** (for example, `Express.Request`).

---

## 6. Union types are possible only with `type`

```javascript
type Status = "loading" | "success" | "error";
```

> An interface cannot describe "one of several states".

---

## 7. Tuples, primitives, and functions

```javascript
type Point = [number, number]; // Tuple
type ID = string | number;     // Union
type Greet = (name: string) => string; // Function
```

> An interface can describe only object-like structures.

---

## 8. Interchangeability

In 90% of cases **interfaces and types are interchangeable**,
especially when describing objects:

```javascript
interface A { id: number }
type B = { id: number }

let a: A = { id: 1 };
let b: B = { id: 2 };

a = b; // Compatible
```

> But if you need to combine types (`|`, `&`) or describe a union, choose `type`.

---

## 9. Practical rule

| Task | What to choose |
|---|---|
| Describing the structure of an object or class | `interface` |
| Creating a union (`A \| B`) or intersection (`A & B`) | `type` |
| Working with primitives (`string`, `number`, `boolean`) | `type` |
| Describing an API or a DTO model | `interface` (or `type`) - depending on the project's style |
| Wanting to extend types declaratively (merging) | `interface` |
| Wanting to combine several different types into one | `type` |

---

## Summary

> **Both tools are for typing, but with a different philosophy:**
>
> - `interface` is for **describing the shape of objects** and **class contracts**
> - `type` is for **flexible combinations, aliases, and unions of types**
>
> In most cases they can be combined:
>
> ```javascript
> interface Base { id: number }
> type Extended = Base & { name: string };
> ```

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.