Зачем нужны операторы keyof и typeof в TypeScript и что возвращает keyof typeof?

Зачем нужны операторы keyof и typeof в TS? Что возвращает keyof typeof?

• typeof: на уровне компиляции получает тип переменной или объекта
• keyof: формирует объединение ключей объектного типа в виде строковых литералов
• keyof typeof X: сначала определяет тип объекта X, а затем извлекает объединение его ключей
• Пример: ts const obj = { a: 1, b: 2 }; type Keys = keyof typeof obj; // "a" | "b"
• Применяется для динамической типизации объектов и констант
• Позволяет описывать типы функций и переменных через структуру существующих значений
• Особенно важен при создании типов из значений без дублирования объявлений
• Дает безопасность типов и автодополнение в редакторах за счет автоматического вывода ключей
• Активно используется в функциональном программировании и реактивных фреймворках для типизации props, параметров и конфигураций

Итак, typeof получает тип значения, keyof извлекает ключи типа, а их сочетание keyof typeof возвращает ключи объекта, определённые по его значению.

Развёрнутый ответ

Краткий ответ

В TypeScript оператор typeof применяется на уровне типов, чтобы получить тип переменной или выражения. Оператор keyof преобразует тип объекта в объединение строковых литералов, представляющих его ключи. Поэтому при применении keyof к typeof результатом становится объединение ключей конкретного значения объекта или переменной.

Допустим, объявлен объект const obj = { a: 1, b: 2 }. В таком случае typeof obj обозначает тип объекта с ключами a и b, тогда как keyof typeof obj представляет собой объединение литералов 'a' | 'b'.

Что важно помнить

• На уровне типов typeof извлекает тип значения переменной. Это удобно, когда требуется повторно использовать уже описанную структуру, не объявляя её заново.
• Оператор keyof принимает объектный тип и возвращает объединение его ключей. Его нередко используют, чтобы ограничить допустимые значения параметра по аналогии с enum.
• Комбинация keyof typeof — распространённый способ автоматически получить ключи доступных свойств объекта. Это поддерживает строгую типизацию и автодополнение в редакторах.

Где применяется на практике

Операторы часто используют для формирования типов на базе константных объектов с настройками или перечислениями. Такой подход избавляет от ручного дублирования ключей и сохраняет безопасность типов. В React 18+ и при работе с формами он также помогает создавать типы props на основе уже объявленных значений.

При необходимости могу показать наглядный пример кода.