TypeScript - Union Types: A Friendly Introduction for Beginners

Привет, будущий суперзвезда кодирования! ? Готовы окунуться в чудесный мир TypeScript и узнать о одной из его самых мощных функций? Сегодня мы рассмотрим Union Types, концепцию, которая может показаться пугающей сначала, но я обещаю, что вы найдете ее super полезной и даже интересной к концу этого руководства!

Как ваш доброжелательный соседский компьютерный учитель, я видел countless студентов, которые загораются, когда они понимают эту концепцию. Так что давайте отправимся в это путешествие вместе, как мы?

Что такое Union Types?

Прежде чем мы углубимся в детали, давайте начнем с простого аналога. Представьте, что у вас есть магическая коробка, которая может удерживать либо машинку, либо мягкую игрушку, но не оба одновременно. Это kinda то, что Union Type в TypeScript – это способ сказать нашему коду, что переменная может быть одного из нескольких типов.

Теперь давайте脏 our руки с кодом!

Синтаксис: Union Literal

Основной синтаксис для Union Type использует символ pipe (|) для разделения различных типов. Это как decir TypeScript, "Эй, это может быть это ИЛИ это!"

let myFavorite: string | number;

myFavorite = "TypeScript"; // Это правильно
console.log(myFavorite); // Вывод: TypeScript

myFavorite = 42; // Это также правильно
console.log(myFavorite); // Вывод: 42

// myFavorite = true; // Это вызвало бы ошибку

В этом примере, myFavorite может быть строкой или числом. Это как наша магическая коробка, которая может удерживать либо слово, либо число, но не что-то другое. Если бы мы попытались положить boolean (например, true) туда, TypeScript показал бы нам ошибку.

Переменная Union Type

Давайте расширить наш предыдущий пример и посмотрим, как Union Types могут сделать наш код более гибким:

type Pet = "cat" | "dog" | "fish";
let myPet: Pet;

myPet = "cat"; // Это правильно
console.log(`I have a ${myPet}`); // Вывод: I have a cat

myPet = "dog"; // Это также правильно
console.log(`I have a ${myPet}`); // Вывод: I have a dog

// myPet = "elephant"; // Это вызвало бы ошибку

Здесь мы создали пользовательский тип叫做 Pet, который может быть только одного из трех конкретных строк. Это как宠物-магазин, который продает только кошек, собак и рыб. Если вы попытаетесь купить слона, извините, это невозможно!

Union Type и параметр функции

Union Types действительно светятся, когда мы используем их с функциями. Они позволяют нашим функциям быть более универсальными, не теряя типовую безопасность. Давайте посмотрим на пример:

function printId(id: number | string) {
console.log(`Your ID is: ${id}`);
}

printId(101); // Вывод: Your ID is: 101
printId("202"); // Вывод: Your ID is: 202

// printId(true); // Это вызвало бы ошибку

В этой функции, printId может принимать либо число, либо строку в качестве аргумента. Это как универсальный считыватель ID-карт, который может обрабатывать как числовые, так и текстовые ID. Но если вы попытаетесь использовать вашу булевую ID-карту, он вежливо откажется!

Union Type и массивы

Теперь давайте поднимем уровень и посмотрим, как Union Types работают с массивами. Приготовьтесь к array магии!

let mixedArray: (number | string)[] = [1, "two", 3, "four", 5];

console.log(mixedArray); // Вывод: [1, "two", 3, "four", 5]

mixedArray.push(6); // Это правильно
mixedArray.push("seven"); // Это также правильно

// mixedArray.push(true); // Это вызвало бы ошибку

console.log(mixedArray); // Вывод: [1, "two", 3, "four", 5, 6, "seven"]

Здесь мы создали массив, который может содержать как числа, так и строки. Это как плейлист, который может включать как трек-номера, так и названия песен. Но если вы попытаетесь тайно положить булево туда, TypeScript вас схватит за руку!

Практические случаи использования

Теперь, когда мы рассмотрели основы, давайте посмотрим на некоторые реальные сценарии, где Union Types могут спасти положение:

1. API Responses: Работая с API, иногда данные, которые вы получаете, могут быть разных типов. Union Types помогают вам优雅но обрабатывать эти вариации.

type ApiResponse = {
status: "success" | "error";
data: string | number | null;
};

function handleResponse(response: ApiResponse) {
if (response.status === "success") {
console.log(`Success! Data: ${response.data}`);
} else {
console.log("An error occurred");
}
}

handleResponse({ status: "success", data: "User profile loaded" });
handleResponse({ status: "error", data: null });

2. Configuration Options: При создании configurable функций, Union Types позволяют вам предоставлять набор допустимых опций.

type Color = "red" | "green" | "blue";
type Size = "small" | "medium" | "large";

function createButton(color: Color, size: Size) {
console.log(`Creating a ${color} button of size ${size}`);
}

createButton("red", "medium"); // Valid
// createButton("yellow", "extra-large"); // Это вызвало бы ошибку

Common Union Type Methods

Вот таблица некоторых общих методов, которые вы можете использовать с Union Types:

Метод	Описание	Пример
typeof	Проверяет тип значения	typeof x === "string"
instanceof	Проверяет, является ли объект экземпляром конкретного класса	x instanceof Date
in	Проверяет, существует ли свойство в объекте	"name" in x
Array.isArray()	Проверяет, является ли значение массивом	Array.isArray(x)

Заключение

Уф! Мы сегодня covered много ground, не так ли? Union Types могут показаться немного сложными сначала, но они incredely мощные инструменты в вашем наборе TypeScript. Они позволяют вам писать более гибкий и robust код, перехватывая потенциальные ошибки до того, как они даже произойдут.

Помните, программирование похоже на изучение нового языка – это требует практики и терпения. Не отчаивайтесь, если вы не поймете это сразу. Продолжайте экспериментировать, продолжайте программировать, и.before you know it, вы будете использовать Union Types как профи!

Заканчивая, я вспомнил студента, который однажды сказал мне: "Union Types – это как швейцарский армейский нож для моего кода!" И вы знаете что? Он был абсолютно прав. Так что идите вперед, молодой кодер, и пусть ваши Union Types всегда будут на вашей стороне! ??

Credits: Image by storyset