Union типы с примитивами позволяют переменной принимать значения нескольких простых типов. Синтаксис string | number означает, что переменная может быть строкой или числом.
В этих практических заданиях вы научитесь:
- Создавать union типы из примитивов
- Использовать сужение типов через
typeofдля безопасной работы - Применять union в параметрах функций
Бесплатный онлайн-тренажер поможет понять, как работает объединение типов в реальном коде TypeScript.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Объявление Union типов.
- Union с примитивами.
- Union с null и undefined.
- Сужение Union типов (Narrowing).
- Модуль 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. Сборка функции с union типом
Из предложенных строк соберите корректную TypeScript-функцию, которая принимает параметр типа string | number, проверяет его тип с помощью typeof и возвращает соответствующее сообщение. Правильный порядок строк единственный. Игнорируйте лишние строки, которые не должны входить в решение.
function processValue(value: string | number): string { if (typeof value === 'string') { return `Received string: ${value}`; } else if (typeof value === 'number') { return `Received number: ${value}`; }} console.log(value); let result = value + 10;2. Заполнение union типа
В этом задании вам предстоит заполнить пропуски в объявлении union типа на TypeScript. Код объявляет переменную value, которой можно присваивать строковые и числовые значения. Исходя из контекста присваиваемых значений, определите, какие примитивные типы нужно использовать в union типе, и вставьте символ объединения типов. После заполнения пропусков код должен корректно компилироваться и выполняться, выводя значения в консоль.
// Объявите union тип string | number для переменной value
let value: input1S input2S input3S;
value = "Hello";
console.log(value);
value = 42;
console.log(value);3. Примитивные и составные типы
Перед вами список типов данных TypeScript. Распределите каждый тип по одной из двух категорий: «Примитивные типы» (string, number, boolean, null, undefined) и «Составные типы» (object, Array, функции). Каждый элемент однозначно относится только к одной категории. Обратите внимание, что примитивные типы представляют собой простые неделимые значения, а составные типы могут содержать другие значения или поведение.
stringnumberbooleannullundefinedobjectArray<string>(x: number) => void4. Исправление синтаксиса union
В этом фрагменте кода TypeScript допущена ошибка в синтаксисе объявления union-типа. Найдите строку с ошибкой и исправьте её, чтобы переменная могла корректно принимать значения разных типов.
let age: string, number;age = 30;console.log("Age: " + age);let price: string | number;price = "100";console.log("Price: " + price);5. Результат с union параметром
Проанализируйте код функции на TypeScript, которая принимает параметр типа union (объединение типов) и использует оператор typeof для условной логики. Рассмотрите конкретный вызов функции с заданным аргументом и определите, какое значение будет возвращено. Выберите правильный результат из предложенных вариантов.
function processValue(value: string | number): string {
if (typeof value === 'string') {
return `String: ${value.toUpperCase()}`;
} else {
return `Number: ${value.toFixed(2)}`;
}
}
const result = processValue(42.123);
console.log(result);6. Разметка частей объявления
Разметьте части объявления переменной в TypeScript, указав для каждого выделенного фрагмента, является ли он ключевым словом, именем переменной, первым типом, оператором объединения, вторым типом или значением. Это упражнение поможет закрепить понимание синтаксиса объединения типов (union types) в TypeScript.
{{let~|~t1}} {{value~|~t2}}: {{string~|~t3}} {{|~|~t4}} {{number~|~t5}} = {{42~|~t6}};7. Порядок проверки типов
Перед вами строки TypeScript-кода, которые обрабатывают переменную с union-типом string | number. Строки перемешаны. Расставьте их в правильном порядке, чтобы получилась корректная конструкция if-else, которая проверяет тип переменной с помощью typeof и выполняет соответствующее действие: для строки выводит её длину, для числа — его квадрат. Обратите внимание на логическую последовательность: объявление переменной, проверка типа, обработка каждого случая.
} console.log(`Квадрат числа: ${value * value}`);let value: string | number = 'hello';if (typeof value === 'string') { console.log(`Длина строки: ${value.length}`);} else {8. Анализ сужения типа
Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как программа обрабатывает входное значение с использованием union типа и сужения через typeof.
function processValue(input: string | number): string {
if (typeof input === 'string') {
return `Строка в верхнем регистре: ${input.toUpperCase()}`;
} else if (typeof input === 'number') {
return `Число с двумя знаками после запятой: ${input.toFixed(2)}`;
}
return 'Неизвестный тип';
}
const result = processValue(42.567);
console.log(result);