Оператор keyof

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

Тренажер по TypeScript

Оператор keyof в TypeScript позволяет получить тип, представляющий собой объединение (union) всех ключей объекта или интерфейса. Например, для интерфейса User с полями id и name, конструкция keyof User вернет тип "id" | "name".

Это крайне полезно при написании универсальных функций, которые принимают имя свойства в качестве аргумента. Используя keyof, мы можем гарантировать, что передаваемая строка точно соответствует названию одного из полей объекта, исключая опечатки и ошибки доступа.

Список тем

1. Определение Union типа

id: 40742_ts_keyof_01

В данном задании вам предстоит применить оператор keyof для интерфейса TypeScript. Ниже приведён код, в котором определён интерфейс Car с тремя полями. Вам необходимо вручную определить и ввести строку, которая является результатом применения оператора keyof к этому интерфейсу. Результат должен быть представлен в виде union-типа, перечисляющего все ключи интерфейса через символ '|'. Введите только эту строку, без дополнительных пробелов в начале и конце.

Что должно получиться?
interface Car {
  brand: string;
  model: string;
  year: number;
}

// Какой будет результат keyof Car?
Сообщения
Проверить
Показать подсказку

2. Использование в Generic

id: 40742_ts_keyof_02

В этом задании вам нужно дополнить обобщённую функцию `getProperty`, чтобы она корректно ограничивала тип второго аргумента (ключа) ключами первого аргумента (объекта). Используйте оператор `keyof` в ограничении дженерика, чтобы обеспечить типобезопасность при доступе к свойствам объекта. После правильного заполнения пропуска функция должна компилироваться и возвращать значение свойства по указанному ключу.

Заполните пропуски
function getProperty<T, K extends input1S>(obj: T, key: K): T[K] {
    return obj[key];
}

const person = { name: "Alice", age: 30 };
const name = getProperty(person, "name");
console.log(name);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Выделение оператора

id: 40742_ts_keyof_03

В данном задании вам необходимо разметить фрагменты кода TypeScript, содержащего оператор keyof. Обратите внимание на строку с определением типа и выделите в ней оператор keyof, а также имя типа, к которому он применяется. Для выделенных сегментов выберите соответствующий тип из предложенных вариантов: «Оператор keyof» или «Имя типа». Это упражнение поможет закрепить понимание синтаксиса и применения оператора keyof в TypeScript.

Кликните по каждому выделенному фрагменту и выберите для него подходящий тип из списка под текстом.
type Keys = {{keyof~|~t1}} {{Person~|~t2}};
Имя типа
Оператор keyof
Сообщения
Проверить
Показать подсказку

4. Функция получения свойства

id: 40742_ts_keyof_04

Из предложенных строк соберите корректную TypeScript-программу, которая объявляет функцию getProperty, использующую оператор keyof для безопасного доступа к свойству объекта, а затем демонстрирует её использование на примере объекта person. Некоторые строки лишние и не должны входить в решение. Программа должна вывести имя 'Alice'.

Перетяните в правильном порядке строки из одного блока в другой
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}
const person = { name: 'Alice', age: 30 };
const name = getProperty(person, 'name');
console.log(name);
const age = person.age;
function getProperty(obj: any, key: string): any {
return obj.key;
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Невалидный ключ

id: 40742_ts_keyof_05

В этом фрагменте TypeScript-кода определён интерфейс User и функция, которая принимает ключ этого интерфейса с использованием оператора keyof. Однако при вызове функции передаётся строка, которая не соответствует ни одному из ключей интерфейса User. Найдите строку с ошибкой и исправьте её, заменив невалидный ключ на существующий ключ интерфейса User.

Найдите ошибку и исправьте
interface User {
  name: string;
  age: number;
}
 
function getValue(obj: User, key: keyof User) {
  return obj[key];
}
 
const user: User = { name: 'Alice', age: 25 };
 
console.log(getValue(user, 'fullName'));
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

6. Типизация ключей

id: 40742_ts_keyof_06

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

Нужно правильно расставить в пропуски предложенные варианты
interface Book {
  title: string;
  author: string;
  year: number;
}

// Создайте тип Keys, который будет объединением ключей Book.
type Keys = input1S;

// Объявите переменную key, которая может быть только одним из ключей Book.
let key: Keys = input2S;
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

7. Создание типизированной переменной

id: 40742_ts_keyof_07

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

Расставьте строки в правильном порядке
  name: string;
let property: PersonKeys;
type PersonKeys = keyof Person;
interface Person {
property = "name";
}
  age: number;
Сообщения
Проверить
Показать подсказку

TypeScript: компиляция и запуск

id: 40742_compiler
TS
Запустить тренажёр (TypeScript)
НайтиКурс.Ру