instanceof guard

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

Тренажер по TypeScript

Оператор instanceof — это встроенный механизм JavaScript, который TypeScript использует как Type Guard (защитник типа). Он позволяет проверить, является ли объект экземпляром определенного класса.

Когда вы используете instanceof внутри условия if, TypeScript автоматически «сужает» (narrows) тип переменной внутри этого блока. Это позволяет безопасно обращаться к методам и свойствам, специфичным для данного класса. Синтаксис: if (obj instanceof MyClass) { ... }. Это незаменимый инструмент при работе с ООП и ошибками.

Список тем

1. Ключевое слово

id: 40690_inst_01_replace

В этом задании вам нужно дополнить код, который проверяет, является ли переменная `error` экземпляром класса `Error`. Используйте оператор проверки типа, чтобы условие `if` корректно работало. После заполнения пропуска код должен вывести сообщение об ошибке, если переменная действительно является экземпляром `Error`.

Заполните пропуски
const error = new Error('Что-то пошло не так');

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

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

id: 40690_inst_02_predict

Проанализируйте приведённый фрагмент кода на TypeScript. Создаётся экземпляр класса Date, после чего выполняются две проверки с помощью оператора instanceof. Вам необходимо предсказать результат выполнения каждой проверки — будет ли он true или false. Выберите вариант, который правильно указывает результаты обеих проверок.

Выберите правильный вариант ответа
const obj: Date = new Date();
console.log(obj instanceof Date);  // ?
console.log(obj instanceof Array); // ?
Сообщения
Проверить
Показать подсказку

3. Блок сужения типа

id: 40690_inst_03_build

Из предложенных строк соберите корректную TypeScript-программу, которая получает элемент по id 'myInput', проверяет, является ли он элементом HTMLInputElement с помощью instanceof, и если да — выводит его значение в консоль. Игнорируйте лишние строки, которые не требуются для решения. Программа должна состоять только из необходимых строк в правильном порядке.

Перетяните в правильном порядке строки из одного блока в другой
const element = document.getElementById('myInput');
if (element instanceof HTMLInputElement) {
    console.log(element.value);
}
const value = element.value;
if (element instanceof HTMLDivElement) {
    console.log(element.innerHTML);
} else {
    console.log("Not an input");
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Выбор свойства

id: 40690_inst_04_select

В этом задании вам предстоит заполнить пропуски в коде TypeScript, используя выпадающие списки. Код демонстрирует использование оператора instanceof для сужения типа (type narrowing). Внутри блока if (animal instanceof Dog) нужно выбрать метод, доступный только экземплярам класса Dog, а в блоке else — общий метод, определённый в базовом классе Animal. Обратите внимание на доступные варианты в списке и выберите подходящие для каждого контекста.

Нужно правильно расставить в пропуски предложенные варианты
class Animal {
  move() {
    console.log('Moving...');
  }
}

class Dog extends Animal {
  bark() {
    console.log('Woof!');
  }
}

function makeSound(animal: Animal) {
  if (animal instanceof Dog) {
    animal.input1S();
  } else {
    animal.input2S();
  }
}

const myPet: Animal = new Dog();
makeSound(myPet);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Опечатка в операторе

id: 40690_inst_05_error

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

Найдите ошибку и исправьте
class Animal {}
let pet = new Animal();
if (pet instanceOf Animal) {
    console.log('Это животное');
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

6. Логика обработки ошибок

id: 40690_inst_06_analyze

Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как функция обрабатывает ошибку с использованием instanceof guard и сужения типа unknown.

function processError(error: unknown): string {
  if (error instanceof Error) {
    return `Ошибка: ${error.message}`;
  } else {
    throw new Error('Неизвестный тип ошибки');
  }
}

// Пример вызова функции с разными входными данными
const result1 = processError(new Error('Сетевая ошибка'));
console.log(result1);

const result2 = processError('Просто строка');
console.log(result2);
Расположите элементы в логичном порядке
Возврат сформированной строки из функции и вывод в консоль
Функция processError вызывается с аргументом new Error('Сетевая ошибка')
Формирование итоговой строки с шаблонным литералом: `Ошибка: ${error.message}`
Проверка: является ли переданный аргумент экземпляром класса Error с помощью instanceof
Чтение свойства message из объекта error (получаем строку 'Сетевая ошибка')
Условие истинно, поэтому выполнение переходит в блок if
Сообщения
Проверить
Показать подсказку

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

id: 40690_compiler

В этом упражнении мы изучим оператор `instanceof`, который позволяет TypeScript точно определить класс объекта во время выполнения. Попробуйте добавить свой собственный класс, например `Dog` с методом `bark()`, и расширьте функцию `handlePet`, чтобы она поддерживала нового питомца. Экспериментируйте: уберите проверку `if` и посмотрите, какую ошибку выдаст компилятор, или создайте массив разных животных и обработайте их в цикле. Это поможет вам понять, как TypeScript автоматически сужает типы внутри блоков условий.

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