Kodokon kodokon.com

Объекты и интерфейсы

Описывай форму своих объектов точными типами, а затем делай их переиспользуемыми с помощью интерфейсов.

8 мин · 3 вопросов

Открыть этот урок в Kodokon

В JavaScript объект объединяет несколько связанных сведений в виде пар «ключ - значение», как карточка с данными: у книги есть название и количество страниц. В TypeScript ты можешь описать точную форму объекта: какие свойства он содержит и какого типа каждое из них.

TYPESCRIPT
const book: { title: string; pages: number } = {
  title: "The Little Prince",
  pages: 96,
};

console.log(book.title); // "The Little Prince"
Форма объекта записана прямо в типе.

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

TYPESCRIPT
interface Recipe {
  name: string;
  servings: number;
  isVegetarian: boolean;
}

const pancakes: Recipe = {
  name: "Pancakes",
  servings: 4,
  isVegetarian: true,
};
Интерфейс Recipe описывает каждый рецепт в программе.

Все свойства интерфейса по умолчанию обязательны: если забыть servings, будет ошибка. Чтобы сделать свойство необязательным, добавь вопросительный знак ? сразу после его имени. Тогда объект можно создать как с этим свойством, так и без него.

TYPESCRIPT
interface Contact {
  name: string;
  phone: string;
  email?: string; // optional thanks to the ?
}

const alice: Contact = {
  name: "Alice",
  phone: "0601020304",
}; // allowed: email can be omitted
email? делает свойство необязательным.

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

  1. Для чего нужен интерфейс в TypeScript?
    • Чтобы описать форму объекта и переиспользовать её
    • Чтобы создать веб-страницу
    • Чтобы функция работала быстрее
    • Чтобы хранить данные на сервере
  2. Что означает вопросительный знак в email?: string?
    • Свойство email обязательно
    • Свойство email необязательно
    • Свойство email всегда пустое
  3. У объекта с типом Recipe отсутствует свойство name. Что произойдёт?
    • TypeScript сообщит об ошибке до выполнения
    • Программа без предупреждения упадёт во время выполнения
    • TypeScript добавит свойство автоматически