0Pricing
Frontend Academy · Урок

Интерфейсы и типы объектов

Описывайте структуру объектов с помощью interface и type, расширяйте интерфейсы, используйте необязательные свойства с ? и readonly для неизменяемости.

«Интерфейсы и типы объектов» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

interface и псевдоним типа

И interface, и type описывают структуру объектов. Главное различие: интерфейсы можно объединять (слияние объявлений), поэтому их обычно предпочитают для определения структуры общедоступных программных интерфейсов. Псевдонимы типов гибче при работе со сложными типами.

// interface:
interface User {
  id: number;
  name: string;
}

// type alias (equivalent for objects):
type User = {
  id: number;
  name: string;
};

Определение интерфейса

Используйте interface, чтобы определить структуру объекта. По умолчанию все свойства обязательны. Разделяйте свойства точками с запятой.

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  inStock: boolean;
  category: string;
}

Необязательные свойства и свойства только для чтения

Помечайте свойства как необязательные с помощью ?. Используйте readonly, чтобы запретить изменение. Свойство readonly обеспечивает неизменяемость во время компиляции.

interface Config {
  host: string;
  port?: number;          // optional: number | undefined
  readonly apiKey: string; // can't change after assignment
}

const config: Config = { host: 'localhost', apiKey: 'abc' };
config.port = 8080;       // OK
config.apiKey = 'new';    // Error: readonly

Расширение интерфейсов

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

interface Animal {
  name: string;
  sound(): string;
}

interface Dog extends Animal {
  breed: string;
  fetch(): void;
}

interface ServiceDog extends Dog {
  task: string;
}

Сигнатуры индексов — динамические ключи

Если имена свойств заранее неизвестны, но известны типы их значений, используйте сигнатуру индекса.

interface StringMap {
  [key: string]: string;
}

const headers: StringMap = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer token123'
};

// Also for translating:
interface Translations {
  [locale: string]: { [key: string]: string };
}

Типы функций в интерфейсах

Определяйте сигнатуры методов внутри интерфейса — работают и сокращённый синтаксис, и полный синтаксис свойств.

interface Logger {
  log(message: string): void;
  warn(message: string): void;
  error(message: string, err?: Error): void;
}

// Also valid:
interface Logger2 {
  log: (message: string) => void;
}

Реализация интерфейсов в классах

Класс может реализовывать один или несколько интерфейсов с помощью implement. TypeScript проверяет, что класс предоставляет все обязательные элементы.

interface Serialisable {
  serialise(): string;
  deserialise(data: string): this;
}

class User implements Serialisable {
  constructor(public name: string) {}
  serialise() { return JSON.stringify({ name: this.name }); }
  deserialise(data: string) {
    const obj = JSON.parse(data);
    return new User(obj.name) as this;
  }
}

Слияние объявлений

Несколько объявлений interface с одинаковым именем объединяются в одно. Это удобно для расширения типов сторонних библиотек. Псевдонимы типов этого не поддерживают.

interface Window {
  myPlugin: { version: string };
}
// Now window.myPlugin is typed everywhere

Вложенные типы объектов

Свойства интерфейса сами могут иметь типы объектов — заданные непосредственно или через ссылку на другой интерфейс.

interface Order {
  id: string;
  customer: {
    name: string;
    email: string;
  };
  items: Array<{
    productId: string;
    quantity: number;
    price: number;
  }>;
  total: number;
}

Структурная типизация — утиная типизация

TypeScript использует структурную типизацию: значение соответствует типу, если содержит как минимум все обязательные свойства. Явная реализация не нужна. Любой объект с подходящей структурой совместим с типом.

interface Named {
  name: string;
}

function greet(obj: Named) {
  console.log(`Hello, ${obj.name}!`);
}

// No 'implements Named' needed:
greet({ name: 'Alice', age: 30 }); // OK — has the name property

Размеченные объединения с интерфейсами

Добавляйте свойство-различитель с литеральным типом, чтобы различать варианты в объединении. TypeScript сужает тип в конструкциях выбора и условий на основе этого различителя.

interface Circle { kind: 'circle'; radius: number; }
interface Square { kind: 'square'; side: number; }
type Shape = Circle | Square;

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle': return Math.PI * shape.radius ** 2;
    case 'square': return shape.side ** 2;
  }
}

Быстрая проверка

В чём ключевое различие между interface и type в TypeScript?

Итог: интерфейсы

Интерфейс описывает структуру объектов с обязательными, необязательными свойствами и свойствами только для чтения. Расширяйте интерфейсы с помощью наследования. Сигнатуры индексов предназначены для динамических ключей. Классы реализуют интерфейсы. Слияние объявлений уникально для интерфейсов. TypeScript использует структурную типизацию: важна структура, а не явное объявление.

Часто задаваемые вопросы

Урок «Интерфейсы и типы объектов» бесплатный?

Да — полный текст урока «Интерфейсы и типы объектов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Интерфейсы и типы объектов»?

Описывайте структуру объектов с помощью interface и type, расширяйте интерфейсы, используйте необязательные свойства с ? и readonly для неизменяемости. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Интерфейсы и типы объектов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Зачем нужен TypeScript: типы выявляют ошибки во время компиляции
  2. Примитивные типы, объединения и псевдонимы типов
  3. Интерфейсы и типы объектов
  4. Компиляция TS и tsconfig.json
← Назад к Frontend Academy