TypeScript Academy · Урок

Оператор типов keyof

Получайте объединение ключей типа объекта с помощью keyof

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

Ключи типа

Оператор keyof принимает тип объекта и создаёт объединение ключей его свойств. Это основа безопасного доступа к свойствам и обобщённых средств работы с ключами.

Основы keyof

Примените keyof к интерфейсу, чтобы получить объединение имён его ключей в виде строковых литеральных типов.

interface User {
  id: number
  name: string
}
type UserKeys = keyof User // "id" | "name"
const k: UserKeys = "name"
console.log(k)

Разрешены только допустимые ключи

Переменная типа keyof T может содержать только один из фактических ключей T. Опечатки и недопустимые ключи обнаруживаются во время компиляции.

interface User { id: number; name: string }
const valid: keyof User = "id"
// const bad: keyof User = "email" // Error: not a key of User
console.log(valid)

keyof и typeof

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

const config = { host: "localhost", port: 8080 }
type ConfigKey = keyof typeof config // "host" | "port"
const key: ConfigKey = "port"
console.log(config[key])

keyof для строковой индексной сигнатуры

Для типа со строковой индексной сигнатурой keyof равен string | number, поскольку разрешён любой строковый ключ, а числовые ключи преобразуются в строки.

type Dict = { [key: string]: number }
type DictKeys = keyof Dict // string | number
const k: DictKeys = "anything"
console.log(k)

keyof для числовой индексной сигнатуры

Для числовой индексной сигнатуры keyof равен просто number. Это соответствует тому, как массивы предоставляют числовые индексы.

type NumDict = { [i: number]: string }
type NumKeys = keyof NumDict // number
const k: NumKeys = 0
console.log(k)

keyof для типа массива

Применение keyof к типу массива даёт неожиданное объединение: числовые индексы, а также имена всех методов и свойств массива, например length и push.

type ArrKeys = keyof string[]
// number | "length" | "push" | "map" | ... many more
const k: ArrKeys = "length"
console.log(k)

Безопасный перебор ключей

Используйте keyof, чтобы писать циклы, работающие только с допустимыми ключами. Приведение Object.keys к типу (keyof T)[] сохраняет типобезопасность индексированного доступа.

interface User { id: number; name: string }
const u: User = { id: 1, name: "Ada" }
const keys = Object.keys(u) as (keyof User)[]
for (const k of keys) console.log(k, u[k])

keyof в ограничениях обобщённых типов

Параметр ключа обобщённого типа обычно ограничивают с помощью K extends keyof T. Это гарантирует, что ключ действительно существует в объекте.

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

Объединение нескольких ключей

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

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const out = {} as Pick<T, K>
  for (const k of keys) out[k] = obj[k]
  return out
}
console.log(pick({ a: 1, b: 2, c: 3 }, ["a", "c"]))

Зачем нужен keyof

keyof превращает имена свойств в тип, который можно проверять, позволяя создавать обобщённые функции получения, установки и преобразования, не способные обратиться к несуществующему ключу. Этот оператор используется повсюду в продвинутом TypeScript.

interface Settings { theme: string; size: number }
function has<T>(obj: T, key: keyof T): boolean {
  return key in (obj as object)
}
console.log(has<Settings>({ theme: "x", size: 1 }, "theme"))

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

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

Повторение

keyof T создаёт объединение ключей свойств T в виде литеральных типов, ограничивая переменные допустимыми ключами. Для строковых индексных сигнатур он возвращает string | number, а для числовых — number. В сочетании с typeof он выводит ключи из значений, а в сочетании с обобщёнными типами (K extends keyof T) обеспечивает типобезопасные функции получения, выбора и перебора.

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

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

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

Чему я научусь в уроке «Оператор типов keyof»?

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

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

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

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

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

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

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

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

← Назад к TypeScript Academy