Проверка типа интерфейса в TypeScript

Проверка типов интерфейса — одна из ключевых возможностей TypeScript. Она помогает убедиться, что объект или класс содержат необходимый набор свойств и методов, указанных в интерфейсе. Благодаря проверке типов вы можете писать более надёжный код, ведь часть ошибок будет найдена ещё на этапе компиляции.

В чём разница между интерфейсами и типами

Проверка типов объектов

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

Определить интерфейс, описывающий структуру объекта. Указать свойства и их типы. Например, ниже мы создаём интерфейс Person, который имеет свойства name (строка), age (число) и email (строка):

interface Person {
  name: string;
  age: number;
  email: string;
}

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

const person: Person = {
  name: "Иван Иванов",
  age: 30,
  email: "ivan@example.com"
};

Проверить тип объекта, передав его в функцию или присвоив переменной с объявленным типом интерфейса. Если объект не соответствует интерфейсу, TypeScript выдаст ошибку компиляции.

function greetPerson(person: Person) {
  console.log(`Привет, ${person.name}!`);
}

greetPerson(person); // Вывод: Привет, Иван Иванов!

В этом примере мы объявляем функцию greetPerson. Она принимает аргумент типа Person (интерфейс) и выводит приветствие с именем человека. В нашем случае всё работает как нужно, поэтому мы видим в консоли Привет, Иван Иванов!. Но если бы в поле age были данные типа string, проверка бы не прошла. Мы бы получили ошибку.

Проверка типов классов

В этом случае TypeScript проверяет, что классы соответствуют ожидаемой структуре и типам данных, определённым в интерфейсе. Посмотрим пример:

interface Animal {
  name: string;
  age: number;
  makeSound(): void;
}

class Dog implements Animal {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  makeSound() {
    console.log("Гав!");
  }
}

class Cat implements Animal {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  makeSound() {
    console.log("Мяу!");
  }
}

const dog: Animal = new Dog("Шарик", 5);
const cat: Animal = new Cat("Кексик", 3);

dog.makeSound(); // Вывод: Гав!
cat.makeSound(); // Вывод: Мяу!

У нас есть интерфейс Animal, который определяет свойства name (строка), age (число) и метод makeSound. Мы создаём два класса — Dog и Cat — которые реализуют интерфейс Animal. Каждый класс имеет свою реализацию метода makeSound: собака лает — Гав!, а кошка мяукает — Мяу!. Далее мы создаём экземпляры классов Dog и Cat, присваивая им тип Animal. Это возможно, так как классы Dog и Cat соответствуют интерфейсу Animal и у них есть все необходимые свойства и методы.

После этого мы вызываем метод makeSound на объектах dog и cat и видим в консоли звуки для каждого животного.

Проверка типов функций

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

interface Calculator {
  add(a: number, b: number): number;
}

const myCalculator: Calculator = {
  add(a, b) {
    return a + b;
  }
};

const result = myCalculator.add(5, 3); // result = 8
console.log(result); // Вывод: 8

В этом примере мы создаём интерфейс Calculator. Он определяет функцию add с двумя аргументами типа number и возвращаемым значением — тоже типа number. Далее мы создаём объект myCalculator, который реализует интерфейс Calculator и определяет функцию add. Затем мы вызываем функцию add с аргументами 5 и 3 и получаем результат — 8.

В чём польза проверки типов

Создаёт правильный рабочий процесс. Разработчикам приходится заранее определять типы данных и интерфейсы, чтобы явно указать ожидаемую структуру и поведение кода. То есть сначала продумывается интерфейс и лишь затем пишется сам код. Это делает взаимодействие между компонентами программы более чётким и понятным.

Делает код надёжным. Некоторые ошибки можно найти и исправить на ранней стадии разработки, ещё до запуска программы.

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

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

Материалы по теме

• Типы данных в TypeScript
• Type predicates в TypeScript на примере
• Для чего использовать дженерики в TypeScript

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.