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

Тип 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
Рекомендуемые программы
профессия
Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React
10 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на JavaScript в браузере и на сервере (Node.js), разработка бекендов на Fastify и фронтенда на React
16 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на JavaScript, разработка веб-приложений, bff и сервисов используя Fastify, проектирование REST API
10 месяцев
с нуля
Старт 26 декабря

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

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

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

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