Что такое keyof

keyof отвечает на вопрос: какие ключи есть у типа. Если есть тип пользователя, TypeScript может построить из его свойств отдельный union-тип.

type User = {
  id: string;
  name: string;
  age: number;
};

type UserKey = keyof User;
// "id" | "name" | "age"

Это не JavaScript-код и не операция над реальным объектом. После компиляции keyof исчезает. Его польза в том, что ошибка с несуществующим ключом ловится до запуска приложения.

Короткий ответ может звучать так:

keyof это оператор TypeScript, который берет тип объекта и возвращает union его ключей. Его часто используют вместе с generics, чтобы принимать только допустимые имена свойств. Если нужно вернуть значение по ключу, связь сохраняют через K extends keyof T и T[K].

После этого сразу добавьте отличие от Object.keys(). Так вы покажете, что понимаете границу между типами и runtime. Это сильнее, чем просто привести пример с 'name' | 'age'.

Самый частый практический пример: безопасный getter. Он полезен в UI-коде, где вы строите таблицу, форму или фильтр по имени поля.

type User = {
  id: string;
  name: string;
  age: number;
};

function getField<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user: User = { id: "u1", name: "Anna", age: 28 };

const name = getField(user, "name");
// string

const age = getField(user, "age");
// number

getField(user, "email");
// error: "email" не является ключом User

Здесь K нужен не для красоты. Он сохраняет конкретный ключ, который вы передали. Поэтому getField(user, "age") возвращает number, а не string | number.

Во frontend-разработке keyof часто появляется в типах колонок таблицы, полях формы, сортировке, настройках фильтров и typed helper-функциях. Идея простая: если UI ссылается на поле модели, TypeScript должен запретить опечатку.

type Product = {
  title: string;
  price: number;
  inStock: boolean;
};

type Column<T> = {
  key: keyof T;
  label: string;
};

const columns: Column<Product>[] = [
  { key: "title", label: "Название" },
  { key: "price", label: "Цена" },
  // { key: "cost", label: "Стоимость" }, // error
];

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

keyof часто используют внутри mapped types. Так TypeScript проходит по ключам исходного типа и создает новый тип с теми же полями, но с другими правилами.

type ValidationState<T> = {
  [K in keyof T]: {
    value: T[K];
    error?: string;
  };
};

type LoginForm = {
  email: string;
  password: string;
};

type LoginValidation = ValidationState<LoginForm>;

В этом примере email остается связанным со string, а не превращается в случайное поле. Для форм это важно. Иначе легко потерять тип значения и начать валидировать число как строку или наоборот.

Не говорите, что keyof всегда возвращает только строки. В TypeScript ключи свойств могут быть строковыми, числовыми и символьными.

type Dictionary = {
  [key: string]: boolean;
};

type DictionaryKey = keyof Dictionary;
// string | number

Причина в поведении JavaScript. Доступ obj[1] и obj["1"] для обычного объекта связан с приведением ключа к строке. Поэтому для типов с index signature результат может быть шире, чем ожидается.

С массивами тоже нужна аккуратность. keyof string[] не означает только индексы элементов. Массив это объект с числовым доступом, length и методами. Если вам нужен тип элемента массива, чаще пишут T[number], а не используют keyof T.

keyof принимает тип. Если у вас есть значение, например объект настроек, сначала нужен typeof.

const routes = {
  home: "/",
  profile: "/profile",
  settings: "/settings",
} as const;

type RouteName = keyof typeof routes;
// "home" | "profile" | "settings"

Та же идея часто встречается с enum:

enum Status {
  Draft = "draft",
  Published = "published",
}

type StatusName = keyof typeof Status;
// "Draft" | "Published"

В ответе достаточно сказать, что typeof переводит значение в его тип, а keyof берет ключи уже у этого типа. Так вы покажете, что не смешиваете переменные и type aliases.

На интервью не нужно превращать ответ в справочник по TypeScript. Держите структуру простой: что делает keyof, где применяется, чем отличается от Object.keys(), какие есть ограничения.

Если вопрос задают в контексте frontend-кода, привяжите ответ к реальному риску. Например, в таблице или форме опечатка в имени поля может дать пустую ячейку, сломанную сортировку или неверную отправку данных. keyof переносит эту ошибку из браузера в компилятор.