Зарегистрируйтесь, чтобы продолжить обучение

Сопоставление типов Продвинутый Typescript

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

interface Person {
  name: string;
  age: number;
  location?: {
    country: string;
    city: string;
  };
}

interface PersonDetails {
  location: Person['location'];
}

Конструкция Type[Key] выглядит и работает также, как получение значения объекта по ключу в JavaScript. Разница только в том, что доступ через точку тут не сработает.

Кроме того, Lookup Types позволяет получить объединение типов из объекта по нескольким известным ключам, объединенным с помощью вертикальной черты |:

type User = {
  id: number;
  name: string;
  email: string;
}

type UserFields = User['id' | 'name' | 'email']; // string | number

Чтобы получить объединение всех ключей из объекта, можно использовать оператор keyof. Давайте упростим наш пример:

type User = {
  id: number;
  name: string;
  email: string;
}

type UserFields = User[keyof User]; // string | number

Обсудим, как не дублировать все поля одного объектного типа в другом типе. Для этого используются два вспомогательных типа:

  • Pick<Type, Keys> — создает объектный тип с ключами Keys из Type
  • Omit<Type, Keys> — создает объектный тип, из которого исключаются ключи Keys из Type

Так это выглядит на практике:

interface Person {
  name: string;
  age: number;
  location?: string;
}

const details: Pick<Person, 'name' | 'age'> = {
  name: 'John',
  age: 42,
};

const details2: Omit<Person, 'location'> = {
  name: 'John',
  age: 42,
};

В этом примере мы получим один и тот же тип в результате и Pick<Person, 'name' | 'age'>, и Omit<Person, 'location'>.

Все Utility Types в TypeScript написаны с помощью встроенных конструкций. Мы уже изучили достаточно много концепций TypeScript, чтобы начать в них разбираться. Попробуем разобраться, как они реализованы. Изучим этот вопрос на примере типа Pick:

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

В коде выше мы видим тип Pick<T, K>. Это дженерик с двумя параметрами — T и K. На K мы также наложили ограничение extends keyof T, чтобы параметр K содержал перечисление ключей из T.

Далее с помощью оператора in выполняется перебор по всем элементам перечисления. Каждый полученный элемент становится ключом. Для его значения мы ищем подходящий тип в объектном типе T[P].

Операторы keyof (Lookup Types) и in (Mapped Types) часто идут вместе. С помощью keyof мы получаем доступ ко всем именам свойств объектного типа, а благодаря in можем циклически пройти по всем свойствам. Эти две операции являются ключевыми при создании своих вспомогательных типов при работе с объектными типами данных.


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
от 25 000 ₸ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 26 декабря
профессия
от 39 525 ₸ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 26 декабря
профессия
от 25 000 ₸ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 26 декабря

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»