Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Тип object Продвинутый Typescript

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

// В качестве типа используется {}
function toString(obj: {}) {
  return obj.toString();
}

toString('wow'); // Ok!
toString(123); // Ok!
toString({}); // Ok!

Пустой объектный тип {} подразумевает под собой объект любой структуры и ограничивает множество всех значений, за исключением null и undefined. Пустой интерфейс работает так же как и пустой объектный тип. Это вряд ли то, что мы ожидали.

Тип Object — это тип объекта. Он работает почти так же, как тип {}. Разница только в том, что Object предопределяет типы toString() и некоторых других встроенных методов, а тип {} этого не делает. Чтобы разобраться, изучим такой пример:

const foo: {} = {
  toString() {
    return 1; // Ok!
  }
};

const bar: Object = {
  toString() {
    return 1; // Error!
  }
};

Второе определение bar не работает, потому что тип Object указывает, что метод toString() должен возвращать строку.

Если мы хотим работать с не примитивными значениями, то для этого существует еще один тип — object с маленькой буквы:

function toString(obj: object) {
  return obj.toString();
}

toString('wow'); // Error!
toString(123); // Error!
toString({}); // Ok!

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

В последующих уроках мы изучим подходы, такие как использование типа Record и дженериков с keyof для работы с объектами любой структуры. А пока вы можете использовать встроенные методы JavaScript, такие как Object.entries() и Object.fromEntries(), чтобы манипулировать объектами с типом object.

Пример динамического извлечения ключей из объекта с использованием этих методов:

const extract = (obj: object, keys: Array<string>): object => {
  const entries = Object.entries(obj).filter(([key]) => keys.includes(key));

  return Object.fromEntries(entries);
};
  1. Метод Object.entries(obj) преобразует объект в массив пар [ключ, значение].
  2. Далее с помощью метода filter() мы оставляем только те пары, ключи которых содержатся в массиве keys.
  3. Наконец, Object.fromEntries(entries) собирает новый объект из отфильтрованных пар.

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


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

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

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

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

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

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

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

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

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

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 21 ноября
профессия
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 21 ноября
профессия
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 21 ноября

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

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

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

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