Утверждение типа (as)

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

Просмотры 24
Рек. время прох. 11 минут
Задачи 8
Популярность 100
Важность 95
Актуальность 100
Сложность 35
Тренажер по TypeScript

Утверждение типа (Type Assertion) — это способ сообщить TypeScript: "Я знаю тип этого значения лучше, чем ты". Синтаксис: с помощью ключевого слова as (например, value as string) или угловых скобок (value).

Это мощный инструмент, но использовать его нужно осторожно, так как он отключает проверку типов в данном месте и может привести к ошибкам во время выполнения, если утверждение окажется неверным. Обычно применяется при работе с DOM, при получении данных из внешних источников (API) или при сужении типов после проверок.

Практические задания этого урока научат вас корректно применять as в типичных сценариях, избегая распространённых ошибок.

Список тем

1. Синтаксис as

id: 40736_assert_01_replace

В этом задании вам нужно дополнить код для работы с DOM-элементом. TypeScript не всегда может определить точный тип HTML-элемента при получении его через document.getElementById. Используйте утверждение типа (type assertion) с ключевым словом 'as', чтобы указать точный тип элемента. Заполните пропуски, чтобы код корректно работал со свойством value элемента input.

Заполните пропуски
// Получаем элемент из DOM
const inputElement = document.getElementById('userInput') input1S input2S;

// Теперь мы можем безопасно обращаться к свойству value
console.log(inputElement.value);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Найди утверждения типа

id: 40736_assert_02_click

Перед вами фрагмент кода на TypeScript, содержащий несколько мест с утверждениями типа (type assertions) и без них. Внимательно изучите код. Ваша задача — найти и выделить все места, где используется оператор утверждения типа `as`. Не отмечайте другие операторы, похожие на `as` (например, в сравнениях или других контекстах), и не отмечайте части кода, где утверждение типа отсутствует.

Кликните по всем фрагментам, которые подходят под условие задания.
interface User {
  name: string;
  age: number;
}

const data: unknown = { name: "Alice", age: 30 };

// Утверждение типа с as
const user1 = {{data as User~|~t1}};

// Альтернативный синтаксис (не использует as)
const user2 = <User>data;

// Пример с массивом
const items: unknown[] = [1, 2, 3];
const numbers = {{items as number[]~|~t2}};

// Ложная цель: as в сравнении
const isUser = data {{as~|~t3}} any;

// Ещё одно утверждение типа
function getValue(): unknown {
  return "hello";
}
const strValue = {{getValue() as string~|~t4}};

// Ложная цель: as в комментарии
// Этот as не является оператором
console.log("Done");
Сообщения
Проверить
Показать подсказку

3. Опасное утверждение

id: 40736_assert_03_error

В этом фрагменте кода TypeScript используется опасное утверждение типа `as`, которое может привести к ошибке во время выполнения, если переменная `data` окажется не строкой. Найдите строку с утверждением и замените его на безопасную проверку типа с помощью оператора `typeof`.

Найдите ошибку и исправьте
// Получаем данные из неизвестного источника
let data: unknown = "Hello, world!";
// Опасное утверждение типа
let messageLength: number = (data as string).length;
console.log(messageLength);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Собери безопасное приведение

id: 40736_assert_04_build

Из предложенных строк соберите корректную функцию на TypeScript, которая безопасно приводит тип элемента после проверки его тега. Функция принимает элемент типа `Element | null` и возвращает его значение `value` как строку, если это элемент ``, иначе возвращает `null`. Для проверки используйте свойство `tagName` и утверждение типа с помощью `as`. В решении должны быть использованы только необходимые строки, лишние — игнорируйте.

Перетяните в правильном порядке строки из одного блока в другой
function getInputValue(element: Element | null): string | null {
    if (element && element.tagName === 'INPUT') {
        return (element as HTMLInputElement).value;
    }
    return null;
}
    if (element instanceof HTMLInputElement) {
        return element.value;
    console.log(element);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Что выведет код?

id: 40736_assert_05_predict

Проанализируйте приведённый фрагмент кода на TypeScript. Внимательно изучите, как используется утверждение типа (as) для переменной с типом unknown, и определите, что произойдёт при попытке выполнения этого кода. Выберите один правильный вариант из предложенных.

Выберите правильный вариант ответа
let value: unknown = "123.45";
let num = value as number;
console.log(num.toFixed(1));
Сообщения
Проверить
Показать подсказку

6. Уместно vs Рискованно

id: 40736_assert_06_sort

Перед вами 8 примеров кода TypeScript, демонстрирующих использование утверждения типа (as). Вам необходимо распределить каждый пример по одной из двух категорий: «Уместное использование утверждения типа» или «Рискованное/неуместное использование». Уместное использование подразумевает ситуации, когда тип данных известен из контекста и утверждение безопасно, а рискованное — когда утверждение может скрыть ошибки типов или привести к сбоям во время выполнения.

Перетяните элементы в соответствующие блоки
Уместное использование утверждения типа
Рискованное/неуместное использование
const element = document.getElementById('myCanvas') as HTMLCanvasElement;
const data: any = getData();
const user = data as User;
function getLength(value: string | number): number {
  if (typeof value === 'string') {
    return (value as string).length;
  }
  return value.toString().length;
}
const obj = {} as { name: string, age: number };
obj.name = 'Alice';
const input = document.querySelector('input[type="text"]') as HTMLInputElement;
const unknownValue: unknown = JSON.parse('{"x": 10}');
const point = unknownValue as { x: number, y: number };
console.log(point.y);
function process<T>(item: T): T {
  // Некоторая логика
  return item as T;
}
const num = 123 as string;
Сообщения
Проверить
Показать подсказку

7. Анализ кода с утверждениями

id: 40736_assert_07_analyze

Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как программа получает элемент из DOM, использует утверждение типа (as) для работы с ним, обрабатывает данные и выводит результат в консоль.

// Входные данные: в DOM есть элемент <input id="userAge" value="25">
const ageElement = document.getElementById('userAge');
if (ageElement) {
  const input = ageElement as HTMLInputElement;
  const ageString = input.value;
  const age = parseInt(ageString);
  if (!isNaN(age)) {
    console.log(`В следующем году вам будет ${age + 1} лет.`);
  } else {
    console.log('Некорректный возраст');
  }
} else {
  console.log('Элемент не найден');
}
Расположите элементы в логичном порядке
Проверка условия: число корректное (не NaN), выполнение переходит во вложенный блок if
Извлечение строкового значения из свойства value элемента
Преобразование строки в число с помощью parseInt
Получение элемента из DOM по id "userAge" (возвращается HTMLElement | null)
Проверка условия: элемент существует (не null), выполнение переходит в блок if
Вывод в консоль сообщения с возрастом, увеличенным на 1
Утверждение типа (as): элемент приводится к типу HTMLInputElement для доступа к свойству value
Сообщения
Проверить
Показать подсказку

8. Последствие неверного as

id: 40736_assert_08_give

Рассмотрите фрагмент кода на TypeScript, в котором переменной типа any присваивается строковое значение, а затем выполняется утверждение типа (as) для приведения к number. Определите, что произойдёт при попытке выполнения этого кода. Введите короткую строку, описывающую результат (например, 'ошибка TypeError' или конкретное строковое значение).

Что должно получиться?
const x: any = '123';
const y = (x as number).toFixed(2);
Сообщения
Проверить
Показать подсказку

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

id: 40736_compiler
TS
Запустить тренажёр (TypeScript)
Предыдущая темаСледующая тема
НайтиКурс.Ру