Типы объединения ('|')
Часть раздела Введение в TypeScript путешествия по JavaScript на Coddy. Урок 31 из 73.
Иногда вам может понадобиться переменная, которая может хранить значения разных типов в зависимости от ситуации. Например, идентификатор пользователя может храниться либо в виде строки, такой как "user123", либо в виде числа, такого как 42. Объединения типов (union types) в TypeScript решают эту проблему, позволяя переменной принимать один из нескольких указанных типов.
Объединения типов используют символ вертикальной черты (|) для объединения нескольких типов. Синтаксис читается естественно как «это ИЛИ то»:
let userId: string | number;
userId = "user123"; // Допустимо - string
userId = 42; // Допустимо - number
userId = true; // Ошибка - boolean не разрешенВы можете объединять любые типы в объединение, а не только примитивы. Эта гибкость делает типы объединения особенно полезными для параметров функций, которые должны принимать несколько форматов ввода:
function displayMessage(content: string | number): void {
console.log("Message: " + content);
}
displayMessage("Hello!"); // Работает со строкой
displayMessage(404); // Работает с числомТипы-объединения (Union types) обеспечивают типобезопасность, сохраняя при этом гибкость — TypeScript гарантирует, что вы используете только те значения, которые соответствуют одному из указанных типов, предотвращая ошибки времени выполнения из-за неожиданных типов данных.
Задание
ЛегкоСоздайте функцию с именем printId, которая принимает параметр id типа string | number и выводит его в консоль. Функция должна иметь явно указанный тип возвращаемого значения void.
Создайте еще одну функцию с именем processValue, которая принимает параметр data типа boolean | string и возвращает его без изменений. Функция должна иметь явно указанный тип возвращаемого значения boolean | string.
Создайте третью функцию с именем formatOutput, которая принимает параметр input типа number | string и возвращает отформатированную строку. Если входное значение — число, верните "Number: [input]". Если входное значение — строка, верните "Text: [input]". Функция должна иметь явно указанный тип возвращаемого значения string.
Будут предоставлены следующие входные данные:
- Первый ввод: значение, которое может быть либо строкой, либо числом (для
printId) - Второй ввод: значение, которое может быть либо логическим значением (boolean), либо строкой (для
processValue) - Третий ввод: значение, которое может быть либо числом, либо строкой (для
formatOutput)
Прочитайте три входных значения, вызовите каждую функцию с соответствующим аргументом и обработайте результаты следующим образом:
- Вызовите
printIdс первым входным значением (она выполнит вывод напрямую) - Вызовите
processValueсо вторым входным значением и выведите возвращенное значение - Вызовите
formatOutputс третьим входным значением и выведите возвращенное значение
Примечание: Первый ввод будет предоставлен в виде строки, но если он представляет собой число (например, "123"), преобразуйте его в число перед передачей в printId. Второй ввод будет предоставлен в виде строки, но если это "true" или "false", преобразуйте его в соответствующее логическое значение. Третий ввод будет предоставлен в виде строки, но если он представляет собой число, преобразуйте его в число.
Попробуйте сами
import * as fs from "fs";
// Чтение входных данных
const stdinBuffer: Buffer = fs.readFileSync(0);
const inputs: string[] = stdinBuffer.toString().trim().split('\n');
const input1 = inputs[0];
const input2 = inputs[1];
const input3 = inputs[2];
// Преобразование входных данных в соответствующие типы
const firstInput = isNaN(Number(input1)) ? input1 : Number(input1);
const secondInput = input2 === "true" ? true : input2 === "false" ? false : input2;
const thirdInput = isNaN(Number(input3)) ? input3 : Number(input3);
// TODO: Напишите ваш код здесь
// Создайте три функции: printId, processValue и formatOutput
// TODO: Вызовите функции с соответствующими входными данными и обработайте результатыВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Введение в TypeScript
1Начало работы с TS
Что такое TypeScript?Зачем использовать TypeScript?Ваш первый код на TypeScriptПроцесс компиляции и ошибкиИтоги: Введение в TS4Работа с функциями
Типизация параметров и возвращаемых значенийТипизация стрелочных функцийТип возвращаемого значения 'void'Необязательные параметры с '?'Значения параметров по умолчаниюТипизация Rest-параметровОпределение типов функцийИтоги: Создание типизированных функций2Основные типы
Базовые типы: str, num, booleanТип 'any': лазейкаТип 'unknown'Работа с 'null' и 'undef'Вывод типов в действииЯвные аннотации типовИтоги: Практика по основным типам5Типы: псевдонимы, объединения и пересечения
Псевдонимы типов для примитивовТипы объединения ('|')Работа с типами объединенияЛитеральные типыТипы пересечения ('&')Комбинирование псевдонимов типовИтоги: продвинутые комбинации типов3Структуры данных: массивы и кортежи
Типизированные массивыМодификатор 'readonly' для массивовЧто такое кортеж?Объявление кортежей и доступ к нимДеструктуризация кортежейКортежи readonlyМногомерные типизированные массивыОператор spread с массивамиИтоги: массивы и кортежиПотренируйтесь самостоятельно: Песочница TypeScript