Одна из главных причин изучения TypeScript — это безопасность типов. В отличие от JavaScript, ошибки несоответствия типов здесь отлавливаются на этапе компиляции, а не во время исполнения. Это урок про то, как читать и исправлять ошибки типизации.
Когда вы пытаетесь передать строку туда, где ожидается число, или обратиться к несуществующему свойству объекта, TypeScript выдаст ошибку. Понимание этих сообщений — ключевой навык.
В этом разделе вас ждут практические задания на поиск багов. Вы будете выступать в роли отладчика: находить места, где код нарушает контракт типов, и исправлять их. Тренировка включает задания на исправление неверных присваиваний, ошибок в аргументах функций и некорректных операций с массивами. Все упражнения доступны онлайн и бесплатно.
- Модуль 1: Введение в TypeScript
- Аннотация типа переменной.
- Автоматический вывод типов (Type Inference).
- Ошибки типизации при компиляции.
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Модуль 19: Utility Types — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
1. Локализация ошибки
Внимательно изучите представленный фрагмент кода на TypeScript. Ваша задача — найти и отметить все места, где происходит вызов метода, который не существует для типа данных переменной, что приведёт к ошибке типизации при компиляции. Не отмечайте корректные вызовы методов, объявления переменных или другие части кода.
let num: number = 42;
let str: string = "hello";
let bool: boolean = true;
console.log({{num.toUpperCase()~|~t1}});
console.log({{str.toUpperCase()~|~t2}});
console.log({{bool.toUpperCase()~|~t3}});
let arr: number[] = [1, 2, 3];
console.log({{arr.toUpperCase()~|~t4}});2. Сопоставление ошибок
В левой колонке приведены фрагменты кода TypeScript, содержащие ошибки типизации. В правой колонке — сообщения об ошибках, которые выдает компилятор TypeScript при попытке компиляции. Сопоставьте каждый фрагмент кода с соответствующим сообщением об ошибке. Обратите внимание, что в правой колонке нет лишних вариантов, но порядок сообщений перемешан.
let age: number = "25";function greet(name: string): void {
console.log(`Hello, ${name}`);
}
greet(123);interface User {
id: number;
name: string;
}
const user: User = { id: 1, name: "Alice", age: 30 };const numbers: number[] = [1, 2, 3, "4"];function getId(): number {
return "abc123";
}3. Исправление типа данных
В этом фрагменте кода TypeScript функция ожидает аргумент типа number, но при вызове передаётся значение типа string. Найдите строку с ошибкой и исправьте её, чтобы код успешно компилировался и выполнялся. Обратите внимание на типы данных и преобразование значений.
function calculateSquare(x: number): number { return x * x;} let inputValue: string = "9";let result = calculateSquare(inputValue);console.log(result);4. Сборка безопасного кода
Из предложенных строк соберите корректную TypeScript-функцию, которая принимает число, умножает его на 2 и возвращает результат. Функция должна быть строго типизирована, чтобы избежать ошибок компиляции. В решении не должно быть лишних строк, которые нарушают типизацию или логику работы. Убедитесь, что функция объявлена до её вызова, а результат выводится в консоль.
function multiplyByTwo(num: number): number { return num * 2;}const result = multiplyByTwo(5);console.log(result);const wrongResult = multiplyByTwo('5'); return num * 2 + '';5. Выбор корректного оператора
В данном фрагменте кода TypeScript возникают ошибки типизации при компиляции из-за операций между несовместимыми типами данных. Вам необходимо выбрать из предложенного списка подходящие операторы или методы преобразования типов, чтобы исправить эти ошибки и обеспечить успешную компиляцию кода. Обратите внимание на типы переменных и требуемые преобразования для выполнения арифметических операций и сравнений.
let a: number = 5;
let b: string = "10";
let sum = a input1S b;
let isEqual = a input2S b;6. Предсказание поведения компилятора
Проанализируйте представленный фрагмент кода на TypeScript. Определите, будет ли данный код успешно скомпилирован компилятором TypeScript, или же возникнет ошибка проверки типов. Если код не скомпилируется, укажите строку, в которой компилятор сообщит об ошибке. Обратите внимание на аннотации типов и соответствие передаваемых значений ожидаемым типам.
function calculateArea(radius: number): number {
return Math.PI * radius * radius;
}
let radiusValue: number = 10;
let userInput: string = "15";
let area1 = calculateArea(radiusValue);
let area2 = calculateArea(userInput);7. Разметка опасных мест
В данном фрагменте кода TypeScript присутствует потенциально опасное место, связанное с конфликтом типов. Разметьте три элемента: переменную, её объявленный тип и значение, которое вызывает несоответствие типов. Для каждого выделенного сегмента выберите один из доступных типов: «Переменная», «Тип» или «Значение».
let {{age~|~t1}}: {{number~|~t2}} = {{'25'~|~t3}};
