Suggest an edit

Improve this article

Refine the answer for “What does the interface keyword do in TS?”. 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 `interface` does

> `interface` in TypeScript describes the **contract** (or "shape") of an object, class, or function:
> which properties it must contain and what types those properties have.

It is not an "implementation" but a **description of the data's shape** - a kind of blueprint.

---

### 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 **strictly matches** the `User` interface:
> all fields are present and have the correct types.

---

## 2. Interface ≠ Object

It is important to understand:
`interface` **does not exist at runtime** -
it is needed only by TypeScript to check types at compile time.

After compiling to JavaScript, this code becomes:

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

> That is, the interface "disappears" - it is used only as a hint and a check.

---

## 3. Optional fields

If a property may **be absent**, a `?` mark is added:

```javascript
interface Product {
  id: number;
  name: string;
  description?: string; // optional field
}

const shirt: Product = { id: 10, name: "Linen shirt" }; // OK
```

---

## 4. Read-only (`readonly`)

Properties can be made **read-only** so they cannot be changed:

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

const user: User = { id: 1, name: "Tim" };
user.id = 2; // Error: read-only property
```

---

## 5. Interfaces can describe **functions**

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

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

> Here the interface describes a *function signature* (what arguments it accepts, what it returns).

---

## 6. Interfaces can describe **classes**

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

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

> The `implements` keyword says:
> "This class must implement the `Person` interface (have the same fields and methods)".

---

## 7. Interface inheritance

Interfaces can **extend** one another with `extends`:

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

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

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

> `Dog` includes all of `Animal`'s properties and adds its own.

---

## 8. Merging interfaces with the same name

Unlike `type`, interfaces **can merge** (declaration merging):

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

interface User {
  name: string;
}

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

> This is convenient when extending libraries or global types.

---

## 9. Interfaces vs types (`type`)

| Capability | `interface` | `type` |
|---|---|---|
| Extension (`extends`) | Yes | Yes |
| Merging | Yes | No |
| Describing primitives, union/tuple | No | Yes |
| Class implementation (`implements`) | Yes | Yes |
| Exist in JS | No | No |

> Usually `interface` is used for **objects and classes**,
> while `type` is used for **more complex type combinations** (`union`, `intersection`, etc.).

---

## Summary

> `interface` is a TypeScript tool for describing data structure.
>
> It lets you:
>
> - describe the shape of objects, functions, and classes;
> - set optional (`?`) and readonly fields;
> - extend other interfaces;
> - ensure that objects and classes **match the expected structure**.
>
> At the same time, interfaces **do not end up in the resulting JavaScript** - they are needed only for type checking and autocompletion.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.