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

Разница между интерфейсами и классами

Интерфейсы

  • Определить новый тип
  • Свойства (подписи)
  • Методы (сигнатуры)
  • Невозможно создать экземпляр

Классы

  • Определить новый тип
  • Свойства (с реализацией)
  • Методы (с реализацией)
  • Может быть создан

Создать интерфейс

Ключевое слово interface используется для создания интерфейса после имени интерфейса.

interface Employee {
  name: string;
  title: string;
}

Здесь Employee представляет имя интерфейса с двумя строковыми свойствами 'name' и 'title'.
Давайте рассмотрим сложный пример.

interface Manager extends Employee {
  department: string;
  numOfEmployees: number;
  scheduleMeeting: (topic: string) => void;
}

Теперь этот интерфейс Manager наследует все свойства интерфейса Employee. Другими словами, интерфейс Manager имеет 4 свойства: имя, должность, отдел и количество сотрудников.
Как я упоминал выше, у интерфейсов нет реализаций методов. Таким образом, любой объект, который наследует интерфейс Manager, будет определять метод scheduleMeeting в соответствии с ним.

Реализовать интерфейс

Любой объект, который реализует вышеупомянутый интерфейс Employee, должен иметь 2 свойства со строковыми типами.

let newEmployee1: Employee = {
    name: 'Sarah',
    title: 'Software Engineer',
  }

Давайте посмотрим на другой пример

let newEmployee2: Employee = {
    name: 'James',
    title: 'Team Lead',
    teamName: 'Alpha squad'
  }

Теперь newEmployee2 имеет одно дополнительное свойство teamName, но оно по-прежнему наследует интерфейс Employee, потому что пока объект имеет все необходимые свойства интерфейса, он может наследовать/расширять интерфейс.
Это также называется системой структурных типов. .

Необязательный член интерфейса

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

interface Person {
  firstName: string;
  lastName: string;
  midName?: string;
}

При реализации интерфейса мы можем пропустить необязательные члены интерфейса, и компилятор не выдаст никакой ошибки.

Спасибо за прочтение!
Не стесняйтесь подключаться к Twitter