Угловые скобки ()

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

Тренажер по TypeScript

Type Assertions (утверждения типов) — это способ сообщить компилятору TypeScript: «Я знаю тип этого значения лучше тебя». Синтаксис угловых скобок (<Тип>значение) — один из способов сделать такое утверждение. Это как инструкция для тренажера TypeScript, которая говорит, как интерпретировать данные.

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

Пример: let someValue: any = 'это строка';
let strLength: number = (someValue).length;

Важно использовать их осторожно, чтобы не подавить реальные ошибки типов. Интерактивные задания и примеры в этом уроке помогут вам понять, когда применение угловых скобок оправдано, а когда от них лучше отказаться. Бесплатный онлайн-тренажер с визуализацией кода — отличный способ потренировать этот навык.

Список тем

1. Вставь утверждение типа

id: 40737_ts_assert_01

В этом задании вам нужно дополнить фрагмент кода на TypeScript, используя утверждение типа с помощью угловых скобок. Переменной `data` присвоен тип `any`, и к ней нужно обратиться, чтобы получить свойство `.length`. Вставьте недостающее утверждение типа, чтобы код компилировался и корректно выводил длину строки. Обратите внимание, что после утверждения типа можно использовать свойства, характерные для указанного типа.

Заполните пропуски
let data: any = "Hello, TypeScript!";
let length: number = (input1S).length;
console.log(length);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

2. Найди ошибочное утверждение

id: 40737_ts_assert_02

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

Найдите ошибку и исправьте
let data: any = { name: 'Alice', age: 30 };
let person = <{ name: string, age: number }>data;
console.log(person.name);
let coordinates = <{ x: number, y: number }>data;
console.log(coordinates.x);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Раздели корректные и некорректные утверждения

id: 40737_ts_assert_03

Перед вами 8 фрагментов кода TypeScript, содержащих утверждения типов с использованием угловых скобок (). Разнесите их по двум категориям: «Корректное использование» и «Потенциально опасное/некорректное использование». Обратите внимание, что корректные утверждения типов должны быть безопасными и не приводить к ошибкам во время выполнения, в то время как некорректные могут вызвать ошибки компиляции или выполнения.

Перетяните элементы в соответствующие блоки
Корректное использование
Потенциально опасное/некорректное использование
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
let anotherValue: any = 123;
let numString: string = (<number>anotherValue).toString();
interface Person { name: string; age: number; }
let obj: any = { name: "John", age: 30 };
let person = <Person>obj;
let value: any = true;
let boolValue: boolean = <boolean>value;
let x: number = 10;
let y: string = <string>x;
let arr: number[] = [1, 2, 3];
let strArr: string[] = <string[]>arr;
let num: any = "123";
let notNumber: number = <number>num;
let something: unknown = "hello";
let len: number = (<string>something).length;
Сообщения
Проверить
Показать подсказку

4. Какой тип получится?

id: 40737_ts_assert_04

Проанализируйте приведённый фрагмент кода TypeScript, содержащий переменную типа `any` и несколько последовательных утверждений типов с использованием угловых скобок. Определите, какой тип TypeScript будет считать у переменной `result` на последнем шаге выполнения этого кода.

Выберите правильный вариант ответа
let data: any = 'Hello, TypeScript!';
let step1 = <string>data;
let step2 = <number>step1;
let result = <boolean>step2;
Сообщения
Проверить
Показать подсказку

5. Отметь все утверждения типа

id: 40737_ts_assert_05

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

Кликните по всем фрагментам, которые подходят под условие задания.
// Примеры утверждений типов с использованием угловых скобок
let someValue: any = "это строка";
let strLength1: number = {{~|~t1}}someValue.length;
let strLength2: number = ({{~|~t2}}someValue).length;

// Утверждение типа для числа
let numValue: any = 42;
let squared: number = {{~|~t3}}numValue * {{~|~t4}}numValue;

// Утверждение типа в условии
if ({{~|~t5}}someFlag) {
    console.log("Флаг установлен");
}

// Утверждение типа для массива
let arr: any = [1, 2, 3];
let firstElement: number = {{~|~t6}}arr[0];

// Пример с дженериком (НЕ утверждение типа)
function identity{{~|~t7}}(arg: T): T {
    return arg;
}

// Пример с аннотацией типа (НЕ утверждение типа)
let anotherValue: {{string~|~t8}} = "текст";

// Пример с синтаксисом 'as' (НЕ утверждение типа с угловыми скобками)
let yetAnotherValue = someValue as {{string~|~t9}};
Сообщения
Проверить
Показать подсказку

6. Восстанови порядок операций

id: 40737_ts_assert_06

Перед вами строки TypeScript-кода, демонстрирующие использование утверждения типа (type assertion) с помощью угловых скобок < >. Строки перемешаны. Восстановите их в правильном логическом порядке, чтобы получился рабочий код, который объявляет переменную с типом any, выполняет утверждение типа в string, а затем вызывает метод для строки. Всего 5 строк.

Расставьте строки в правильном порядке
console.log(strLength);
let assertedValue: string = <string>data;
// Вывод: 10
let data: any = "TypeScript";
let strLength: number = assertedValue.length;
Сообщения
Проверить
Показать подсказку

7. Чему равно свойство?

id: 40737_ts_assert_07

В данном фрагменте кода TypeScript переменной типа `any` присваивается строковое значение. Затем с помощью утверждения типа (type assertion) с использованием угловых скобок `<тип>` переменная приводится к типу `string`, после чего у неё запрашивается свойство `length`. Определите, какое числовое значение будет сохранено в переменной `len` после выполнения этого кода. Введите одно число.

Что должно получиться?
let value: any = "Assertion";
let len = (<string>value).length;
Сообщения
Проверить
Показать подсказку

8. Логика работы с DOM

id: 40737_ts_assert_08

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

// Предположим, в DOM есть элемент: <input id="username" value="Иван">
const element = document.getElementById('username');
if (element) {
  const inputElement = <HTMLInputElement>element;
  const value = inputElement.value;
  console.log(value);
}
Расположите элементы в логичном порядке
Получение элемента DOM по id 'username' с помощью document.getElementById
Сохранение утверждённого элемента в переменную inputElement
Проверка, что элемент не равен null (условие if)
Обращение к свойству value утверждённого элемента
Вывод значения свойства value в консоль
Утверждение типа элемента как HTMLInputElement с использованием угловых скобок
Сообщения
Проверить
Показать подсказку

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

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