Menu
CoddyTech

Типы объединения ('|')

Часть раздела Введение в 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 гарантирует, что вы используете только те значения, которые соответствуют одному из указанных типов, предотвращая ошибки времени выполнения из-за неожиданных типов данных.

challenge icon

Задание

Легко

Создайте функцию с именем 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: Вызовите функции с соответствующими входными данными и обработайте результаты
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Введение в TypeScript

Потренируйтесь самостоятельно: Песочница TypeScript