Suggest an edit

Improve this article

Refine the answer for “What is an interface in TypeScript?”. 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 an interface is

> An **interface** in TypeScript is a **data structure contract**
> that describes which properties and methods an object must have,
> and what their types are.

In other words: an interface says **"what data is expected"**, but does not describe **"how it is implemented"**.

---

### A simple example

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

const user: User = {
  id: 1,
  name: "Tim",
  isAdmin: true,
};
```

> The compiler checks that the `user` object contains all the fields (`id`, `name`, `isAdmin`)
> and that their types match the interface.

---

## 2. Interfaces are needed **only at compile time**

Interfaces **do not exist in JavaScript code** - they are completely removed after compilation.
TypeScript uses them only for type checking and IDE hints.

```javascript
interface Product {
  id: number;
  title: string;
}
```

After compilation, this code turns into:

```javascript
// (The interface is gone)
```

---

## 3. Optional and read-only properties

### Optional properties - the `?` mark

```javascript
interface Product {
  id: number;
  title: string;
  description?: string; // can be omitted
}
```

### Read-only - `readonly`

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

const u: User = { id: 1, name: "Tim" };
u.id = 2; // Error: id cannot be changed
```

---

## 4. Interfaces can describe **functions**

```javascript
interface Greeter {
  (name: string): string;
}

const greet: Greeter = (name) => `Hello, ${name}!`;
```

> Here the interface defines the function signature - what arguments it takes and what it returns.

---

## 5. Interfaces and classes

Classes can **implement** interfaces via `implements`.

```javascript
interface Person {
  name: string;
  sayHello(): void;
}

class User implements Person {
  constructor(public name: string) {}
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}
```

> TypeScript guarantees that the `User` class implements everything `Person` requires.

---

## 6. Interface inheritance (`extends`)

Interfaces can be **extended**, creating a hierarchy of types.

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

interface Dog extends Animal {
  bark(): void;
}

const rex: Dog = {
  name: "Rex",
  bark() {
    console.log("Woof!");
  },
};
```

> `Dog` includes all the fields of `Animal`, plus its own.

---

## 7. Index signatures

If the property names are not known in advance, their shape can be described via an index:

```javascript
interface Dictionary {
  [key: string]: string;
}

const colors: Dictionary = {
  red: "#ff0000",
  green: "#00ff00",
};
```

---

## 8. Merging interfaces (Declaration Merging)

If you declare two interfaces with the same name, TypeScript **merges them**:

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

interface User {
  name: string;
}

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

> This is a feature of interfaces - `type` cannot do this.

---

## 9. Difference between `interface` and `type`

| Capability | `interface` | `type` |
|---|---|---|
| Describing objects and classes | Yes | Yes |
| Extension (`extends`) | Yes | Yes (`&`) |
| Union / Intersection | No | Yes |
| Tuples, functions, primitives | Partially | Yes |
| Declaration merging | Yes | No |
| Implementation in a class (`implements`) | Yes | Yes |

> The rule is simple:
>
> - `interface` - for **objects and classes**,
> - `type` - for **combinations and advanced types**.

---

## Summary

> An **interface** in TypeScript is a mechanism for
> describing a **data structure (contract)**:
> which properties, methods, and data types are expected.
>
> It:
>
> - helps the IDE hint and check code;
> - guarantees that objects and classes match the given structure;
> - can be inherited and merged;
> - does not exist in the resulting JavaScript - it is needed only for typing.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.