3. Интерфейсы

![Иллюстрация к уроку](/lessons/typescript-interfaces.png)
Интерфейсы в TypeScript — это мощный инструмент для определения структуры объектов. Они позволяют нам описывать, какие свойства и методы должны присутствовать в объекте, обеспечивая статическую типизацию и повышая надежность кода.

## Что такое интерфейс?

Интерфейс можно представить как контракт. Он говорит: "Все, кто хочет соответствовать этому интерфейсу, должны иметь определенные свойства и методы с определенными типами". Интерфейсы не создают экземпляры объектов, они просто описывают их форму.

```typescript
interface User {
  id: number;
  name: string;
  age: number;
  greet(phrase: string): string; // Метод, возвращающий строку
}

В этом примере мы определили интерфейс User. Он требует, чтобы любой объект, реализующий этот интерфейс, имел:

свойство id типа number
свойство name типа string
свойство age типа number
метод greet, принимающий строку phrase и возвращающий строку.

Реализация интерфейса

Чтобы объект соответствовал интерфейсу, нужно, чтобы он содержал все свойства и методы, описанные в интерфейсе, с правильными типами.

const user1: User = {
  id: 1,
  name: "John Doe",
  age: 30,
  greet(phrase: string) {
    return `${phrase}, my name is ${this.name}`;
  },
};

console.log(user1.greet("Hello")); // Вывод: Hello, my name is John Doe

Если мы попытаемся создать объект, который не соответствует интерфейсу, TypeScript выдаст ошибку:

// Ошибка: Отсутствует свойство 'greet' в типе '{ id: number; name: string; age: number; }', но требуется в типе 'User'.
// const user2: User = {
//   id: 2,
//   name: "Jane Doe",
//   age: 25,
// };

Необязательные свойства

Интерфейсы также могут содержать необязательные свойства. Они помечаются знаком вопроса ?.

interface Product {
  id: number;
  name: string;
  description?: string; // Необязательное свойство
  price: number;
}

const product1: Product = {
  id: 1,
  name: "Laptop",
  price: 1200,
};

const product2: Product = {
  id: 2,
  name: "Mouse",
  description: "Wireless mouse",
  price: 25,
};

Жизненный пример

Интерфейсы широко используются в React, Angular и других фреймворках для определения структуры данных, передаваемых между компонентами. Например, в React можно использовать интерфейсы для определения типа props:

interface Props {
  title: string;
  content: string;
}

const MyComponent: React.FC<Props> = ({ title, content }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
};

Здесь интерфейс Props описывает структуру данных, которые компонент MyComponent принимает в качестве props. Это помогает гарантировать, что компонент получает ожидаемые данные и работает правильно. Также, API запросы часто используют интерфейсы для типизации возвращаемых данных.

Ключевые моменты

Интерфейсы определяют структуру объектов.
Все свойства и методы, указанные в интерфейсе, должны присутствовать в объекте, реализующем интерфейс.
Необязательные свойства помечаются знаком вопроса ?.
Интерфейсы широко используются для типизации данных в React, Angular и других фреймворках.
Обеспечивают статическую типизацию и повышают надежность кода.

## Интерактивный пример

<Playground client:load
  template="static"
  files={{
    "/index.html": `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript Interfaces</title>
    <style>
        body { background-color: #282c34; color: white; font-family: sans-serif; display: flex; flex-direction: column; align-items: center; }
        #output { margin-top: 20px; }
    </style>
</head>
<body>
    <h1>TypeScript Interfaces Demo</h1>
    <div id="output"></div>

    <script type="module">
        interface Person {
            name: string;
            age: number;
            greet(): string;
        }

        const person1: Person = {
            name: "Alice",
            age: 30,
            greet() {
                return \`Hello, my name is \${this.name} and I am \${this.age} years old.\`;
            }
        };

        const outputDiv = document.getElementById("output");
        if (outputDiv) {
            outputDiv.textContent = person1.greet();
        }
    <\/script>
</body>
</html>
`
  }}
/>