Пользовательские Type Guards (is)

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

Тренажер по TypeScript

TypeScript не всегда может автоматически понять, как изменился тип переменной после проверки условия. Для решения этой задачи используются User-Defined Type Guards — пользовательские защитники типа.

Это обычные функции, возвращающие boolean, но имеющие особенную сигнатуру возврата: arg is Type. Например: function isFish(pet: Pet): pet is Fish. Если эта функция возвращает true, TypeScript сужает тип переменной pet до Fish внутри соответствующего блока кода. Это ключевой механизм для безопасной работы с объединениями типов (Union Types) в разработке.

Вас ждут задания на написание правильных предикатов типов. Вы научитесь синтаксису is, узнаете, где его применять и как избежать ошибок при написании логики проверки. Эти навыки необходимы для написания надежного кода без лишних приведений типов (as).

Список тем

1. Синтаксис предиката is

id: 40691_ts_guard_replace_01

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

Заполните пропуски
function isString(value: any): value input1S string {
    return typeof value === 'string';
}

const testValue: unknown = 'Hello';
if (isString(testValue)) {
    console.log(testValue.toUpperCase()); // Без ошибки типов
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Ошибка в типе возврата

id: 40691_ts_guard_error_04

В этом фрагменте TypeScript-кода определена пользовательская type guard функция, которая проверяет, является ли переданное значение строкой. Однако из-за неправильного типа возврата (просто boolean вместо предиката типа) сужение типа внутри условия if не работает, и код вызывает ошибку компиляции. Исправьте тип возврата функции, чтобы TypeScript мог корректно сузить тип переменной внутри блока условия.

Найдите ошибку и исправьте
function isString(value: unknown): boolean {
    return typeof value === 'string';
}
 
function processValue(value: unknown) {
    if (isString(value)) {
        console.log(value.toUpperCase());
    }
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Применение гарда

id: 40691_ts_guard_select_fill_05

В данном фрагменте кода TypeScript используется пользовательская функция-гард (type guard) для проверки типа переменной. Вам необходимо выбрать правильное имя функции-гарда и имя переменной, чтобы условие if корректно сузило тип и позволило вызвать метод строки. Обратите внимание на синтаксис вызова функции-гарда и область видимости переменной.

Нужно правильно расставить в пропуски предложенные варианты
function isString(value: unknown): value is string {
    return typeof value === 'string';
}

let data: unknown = "Hello, TypeScript!";

if (input1S(input2S)) {
    console.log(data.toUpperCase());
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Сборка функции-проверки

id: 40691_ts_guard_build_06

Из предложенных строк соберите корректную функцию-гвард (type guard) `isNumber` на TypeScript, которая проверяет, является ли переданное значение числом. Функция должна использовать предикат `value is number` и оператор `typeof` для проверки. В решении должны быть только необходимые строки, лишние строки игнорируйте. Правильная функция состоит из 4 строк: объявление, открывающая фигурная скобка, проверка с возвратом результата, закрывающая фигурная скобка.

Перетяните в правильном порядке строки из одного блока в другой
function isNumber(value: unknown): value is number {
    const isNum = typeof value === 'number';
    return isNum;
}
function isString(value: unknown): value is string {
    return typeof value === 'string';
}
    return true;
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Результат проверки

id: 40691_ts_guard_give_result_07

В приведённом ниже фрагменте кода TypeScript определён пользовательский type guard (гард типа) `isAdmin`, который проверяет, имеет ли переданный объект свойство `role` со значением `'admin'`. Затем создаётся объект `user` и вызывается функция `isAdmin` с этим объектом. Определите, какое значение (`true` или `false`) вернёт функция `isAdmin` для объекта `user`. Введите ответ в поле ниже в виде одного слова — `true` или `false`.

Что должно получиться?
interface User {
  name: string;
  role?: string;
}

function isAdmin(user: User): user is User & { role: 'admin' } {
  return user.role === 'admin';
}

const user: User = {
  name: 'Alice',
  role: 'user'
};

const result = isAdmin(user);
Сообщения
Проверить
Показать подсказку

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

id: 40691_compiler

В этом упражнении мы научимся «учить» TypeScript понимать типы через пользовательские проверки (Type Guards). Вы увидите, как оператор 'is' помогает компилятору точно определить тип переменной внутри блока if. Попробуйте добавить в интерфейс Admin новое поле, например 'level', и обновить функцию isAdmin, чтобы она учитывала это поле. Экспериментируйте: удалите 'is Admin' из заголовка функции и посмотрите, как TypeScript перестанет понимать, что у объекта есть доступ к массиву permissions!

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