Комбинация операторов keyof typeof — это мощный паттерн в TypeScript, позволяющий извлечь ключи из конкретного значения (объекта), а не из типа.
Обычно keyof применяется к типам. Но что, если у нас есть объект конфигурации или словарь констант, и мы хотим создать тип, разрешающий только ключи этого объекта? Сначала мы используем typeof, чтобы получить тип объекта, а затем сразу применяем keyof, чтобы получить объединение (Union) строковых литералов его ключей.
Пример: type Keys = keyof typeof myObject;. Это позволяет поддерживать принцип единственного источника правды: вы меняете объект, а тип обновляется автоматически.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Модуль 19: Utility Types — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Оператор keyof.
- Оператор typeof в типах.
- Комбинация keyof typeof.
- Indexed Access Types.
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
1. Создание типа из объекта
Дан объект colors, который содержит три цвета в формате HEX. Необходимо создать тип ColorName, который будет представлять собой объединение строковых литералов - ключей объекта colors. Для этого используйте комбинацию операторов keyof и typeof. В первом пропуске введите ключевые слова keyof и typeof, во втором — имя объекта colors. После правильного заполнения тип ColorName будет равен 'red' | 'green' | 'blue'.
const colors = {
red: '#FF0000',
green: '#00FF00',
blue: '#0000FF'
};
// Создайте тип ColorName из ключей объекта colors, используя keyof и typeof
type ColorName = input1S input2S;
const myColor: ColorName = 'red';2. Цепочка преобразований
Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как программа использует операторы keyof и typeof для работы с типами на основе объекта.
const person = {
name: 'Alice',
age: 30,
city: 'Paris'
};
type Person = typeof person;
type PersonKeys = keyof Person;
function getValue(obj: Person, key: PersonKeys) {
return obj[key];
}
const key: PersonKeys = 'name';
console.log(getValue(person, key));3. Порядок операторов
В этом фрагменте TypeScript-кода определён объект colors, который содержит три цвета в формате HEX. Затем предпринимается попытка создать тип ColorKeys, который должен представлять объединение строковых литералов ключей объекта colors. Однако в строке определения типа допущена ошибка в порядке использования операторов typeof и keyof. Исправьте эту строку, чтобы тип ColorKeys корректно определялся как объединение ключей объекта colors.
// Объект colors содержит три цвета в формате HEXconst colors = { red: '#FF0000', green: '#00FF00', blue: '#0000FF' };type ColorKeys = typeof keyof colors;4. Типизация аргументов
В данном задании вам предстоит заполнить пропуски в коде TypeScript, чтобы функция getConfig принимала только существующие ключи объекта config. Используйте выпадающие списки, чтобы выбрать правильный тип для параметра key и конкретный ключ для вызова функции. Это упражнение поможет закрепить понимание комбинации операторов keyof и typeof для безопасного доступа к свойствам объектов.
const config = {
port: 3000,
host: 'localhost',
debug: true
};
function getConfig(key: input1S) {
return config[key];
}
// Пример использования
const port = getConfig(input2S);5. Результат объединения
Рассмотрите приведённый фрагмент кода на TypeScript, использующий комбинацию операторов keyof и typeof. Определите, какой тип будет присвоен псевдониму типа ColorKeys в результате выполнения этой операции. Выберите один правильный вариант из предложенных ниже.
const colors = { red: '#FF0000', blue: '#0000FF' };
type ColorKeys = keyof typeof colors;6. Lookup типы
Из предложенных строк соберите корректную TypeScript-программу, которая создаёт объект product, определяет тип для его ключей с помощью комбинации keyof typeof, объявляет переменную этого типа, присваивает ей допустимое значение и выводит это значение в консоль. Некоторые строки лишние и не должны входить в решение.
const product = { name: "Laptop", price: 1500, category: "Electronics" };type ProductKeys = keyof typeof product;let key: ProductKeys;key = "name";console.log(key);key = "invalid";let key2: string;type ProductKeys2 = keyof product;