TypeScript Academy · Урок

Объединение typeof и keyof

Выводите точные типы, объединяя операторы типов

«Объединение typeof и keyof» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Мощное сочетание

По отдельности typeof выводит тип из значения, а keyof перечисляет ключи типа. Вместе — keyof typeof value — они создают объединение фактических ключей значения и обеспечивают полностью типобезопасный доступ.

keyof typeof в действии

Начните с объекта-константы, получите его тип с помощью typeof, а затем перечислите его ключи с помощью keyof. В результате получится объединение литеральных имён ключей объекта.

const colors = { red: "#f00", green: "#0f0" }
type ColorKey = keyof typeof colors // "red" | "green"
const k: ColorKey = "red"
console.log(colors[k])

Зачем нужен этот шаблон

Нередко у Вас есть объект времени выполнения, но нет отдельного интерфейса. keyof typeof позволяет получить тип ключей, не дублируя структуру объекта в объявленном вручную типе.

const status = { active: 1, inactive: 0, pending: 2 }
type Status = keyof typeof status // "active" | "inactive" | "pending"
const s: Status = "pending"
console.log(status[s]) // 2

Типобезопасный доступ по ключу

Параметр функции с типом keyof typeof obj отклоняет недопустимые ключи на этапе компиляции, поэтому индексированный доступ внутри функции гарантированно безопасен.

const rates = { usd: 1, eur: 1.1, gbp: 1.3 }
function rate(currency: keyof typeof rates): number {
  return rates[currency]
}
console.log(rate("eur")) // 1.1
// rate("jpy") // Error: not a key

Константные объекты, похожие на перечисления

Распространённый приём: объявить объект as const как псевдоперечисление, а затем вывести из него типы и ключей, и значений.

const Direction = { Up: "UP", Down: "DOWN" } as const
type DirKey = keyof typeof Direction // "Up" | "Down"
type DirValue = typeof Direction[keyof typeof Direction] // "UP" | "DOWN"
console.log(Direction.Up)

Ключи и значения

Обратите внимание на различие: keyof typeof obj даёт имена ключей, а typeof obj[keyof typeof obj] — типы значений. Выбирайте нужный вариант в зависимости от требований Вашего программного интерфейса.

const sizes = { sm: 8, md: 16, lg: 24 } as const
type SizeName = keyof typeof sizes // "sm" | "md" | "lg"
type SizeValue = typeof sizes[keyof typeof sizes] // 8 | 16 | 24
const v: SizeValue = 16
console.log(v)

Обобщённая функция getProperty

Классическая типобезопасная функция чтения ограничивает параметр ключа с помощью K extends keyof T и возвращает T[K], поэтому тип результата в точности совпадает с типом найденного свойства.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const user = { id: 1, name: "Ada" }
const name = getProperty(user, "name") // string
console.log(name)

Возвращаемый тип зависит от ключа

Поскольку возвращается T[K], тип результата каждого вызова адаптируется к переданному ключу: для одного ключа это будет число, для другого — строка.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1, name: "Ada" }
const id = getProperty(u, "id")     // number
const nm = getProperty(u, "name")   // string
console.log(id, nm)

Недопустимые ключи отклоняются

Передача ключа, которого нет в объекте, приводит к ошибке компиляции. Ограничение обобщённого типа проверяет это ещё до запуска кода.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1 }
// getProperty(u, "missing") // Error: not a key of u
console.log(getProperty(u, "id"))

Типобезопасная функция записи

На основе того же механизма можно создать функцию записи: параметр значения имеет тип T[K], поэтому для каждого ключа можно присвоить только значение правильного типа.

function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
  obj[key] = value
}
const u = { id: 1, name: "Ada" }
setProperty(u, "name", "Leo")
console.log(u.name)

Объединяем всё

Шаблон keyof typeof в сочетании с обобщённым доступом T[K] даёт безопасные и повторно используемые инструменты для работы с реальными объектами — основу типизированных средств чтения конфигурации, поиска и помощников для форм.

const theme = { primary: "#007", danger: "#f00" } as const
function color(name: keyof typeof theme): string {
  return theme[name]
}
console.log(color("danger")) // #f00

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете сочетание typeof и keyof.

Итоги

keyof typeof value выводит объединение фактических ключей значения без объявления отдельного интерфейса, делая индексированный доступ типобезопасным. Различайте типы ключей (keyof typeof obj) и типы значений (typeof obj[keyof typeof obj]). Обобщённый шаблон getProperty<T, K extends keyof T>(obj, key): T[K] возвращает точный найденный тип и отклоняет недопустимые ключи на этапе компиляции.

Часто задаваемые вопросы

Урок «Объединение typeof и keyof» бесплатный?

Да — полный текст урока «Объединение typeof и keyof» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Объединение typeof и keyof»?

Выводите точные типы, объединяя операторы типов Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Объединение typeof и keyof»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к TypeScript Academy