TypeScript union va literal tiplar

Maqola holati faqat uchta qiymatdan biri bo’lishi mumkin: qoralama, chop etilgan yoki arxivlangan. Uni string deb e’lon qilsangiz, "chop etildi" yoki "Draft" kabi xato yozuv ham o’tib ketadi.

TypeScript ruxsat etilgan qiymatlarni aniq sanab qo’yishga imkon beradi.

Union — bir nechta tipdan biri

Vertikal chiziq “yo bu, yo u” degani:

type Identifier = string | number;

const textCode: Identifier = "A-12";
const numberCode: Identifier = 42;

console.log(textCode, numberCode);

A-12 42

string | null yozuvini asosiy tiplar darsida ko’rgansiz — u ham union edi.

Union bilan ishlashda chegara bor

Union qiymatida faqat hamma tipga umumiy bo’lgan narsalarni ishlatish mumkin:

function format(value: string | number): string {
  return value.toUpperCase();
}

example.ts(2,16): error TS2339: Property 'toUpperCase' does not exist on type 'string | number'.
  Property 'toUpperCase' does not exist on type 'number'.

Xabarning ikkinchi qatori sababni aniq aytadi: number da toUpperCase metodi yo’q. TypeScript value hozir qaysi tip ekanini bilmaydi, shuning uchun xavfsiz yo’lni tanlaydi.

Toraytirish — tipni aniqlashtirish

Yechim: if bilan tipni tekshirish. TypeScript tekshiruvni tushunadi va shoxlar ichida tipni aniqlashtiradi:

function describe(id: string | number): string {
  if (typeof id === "string") {
    return `Matnli kod: ${id.toUpperCase()}`;
  }
  return `Raqamli kod: ${id.toFixed(0)}`;
}

console.log(describe("a-12"));
console.log(describe(42));

Matnli kod: A-12
Raqamli kod: 42

if ichida id — aniq string, shuning uchun toUpperCase ishlaydi. if dan keyin esa faqat number qoladi va toFixed ruxsat etiladi.

Bu mexanizm TypeScript’ning eng kuchli tomoni: siz odatdagidek tekshiruv yozasiz, tip esa o’zi to’g’rilanadi.

Literal tip — aniq qiymatlar ro’yxati

Union ichida tip nomi emas, qiymatning o’zi turishi mumkin:

type Status = "draft" | "published" | "archived";

let articleStatus: Status = "draft";
articleStatus = "published";

Ro’yxatda yo’q qiymat o’tmaydi:

articleStatus = "archived2";

example.ts(5,1): error TS2820: Type '"archived2"' is not assignable to type 'Status'. Did you mean '"archived"'?

Xabar oxiridagi savolga e’tibor bering: yozuv ruxsat etilgan qiymatga yaqin bo’lsa, TypeScript to’g’ri variantni o’zi taklif qiladi.

Foydasi kundalik: muharrir articleStatus = " yozganingizda uchta mumkin qiymatni o’zi taklif qiladi. Imlo xatosi imkonsiz bo’lib qoladi.

Literal union bilan funksiya

type Status = "draft" | "published" | "archived";

function statusLabel(status: Status): string {
  if (status === "draft") return "Qoralama";
  if (status === "published") return "Chop etilgan";
  return "Arxivlangan";
}

console.log(statusLabel("draft"));
console.log(statusLabel("archived"));

Qoralama
Arxivlangan

Funksiyaga "nashr" kabi qiymat berib bo’lmaydi — xato e’lon paytida chiqadi.

Ajratuvchi maydonli union

Eng foydali naqsh: har variantda bir xil nomli maydon bo’ladi va uning qiymati variantni ajratib turadi.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "rectangle"; width: number; height: number };

function area(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
  }
  return shape.width * shape.height;
}

console.log(area({ kind: "circle", radius: 2 }).toFixed(2));
console.log(area({ kind: "rectangle", width: 3, height: 4 }));

12.57
12

kind maydonini tekshirgach, TypeScript qaysi variant ekanini biladi: birinchi shoxda radius, ikkinchisida width va height mavjud.

null bilan toraytirish

Amalda eng ko’p uchraydigan holat — funksiya natija topmasligi mumkin:

function findUser(name: string): string | null {
  if (name === "Aziz") return "Aziz Karimov";
  return null;
}

const found = findUser("Bobur");

if (found !== null) {
  console.log(found.toUpperCase());
} else {
  console.log("Topilmadi");
}

Topilmadi

Qaytish tipini string | null deb yozish muhim: u funksiyani chaqirgan har kimni natijani tekshirishga majburlaydi.

Toraytirish usullari

Tekshiruv	Qachon ishlatiladi
typeof x === "string"	Asosiy tiplar uchun
x === null	Bo’sh qiymat uchun
x.kind === "circle"	Ajratuvchi maydonli union uchun
"radius" in shape	Maydon bor-yo’qligini tekshirish
x instanceof Error	Sinf nusxasi uchun

Oxirgi qator try/catch bilan ishlashda kerak bo’ladi: xatolar darsidagi catch blokidagi qiymat tipi oldindan noma’lum, shuning uchun uni tekshirish zarur.

Amaliy mashq

1. type Identifier = string | number e’lon qilib, ikkala tipdagi qiymat berib ko’ring;
2. Union qiymatida toUpperCase() ni tekshiruvsiz chaqirib, TS2339 xato xabarining ikkinchi qatorini o’qing;
3. Shu kodni typeof tekshiruvi bilan tuzating;
4. type Weekday nomli literal union yarating va ro’yxatda yo’q kunni berib xato xabarini o’qing;
5. Ajratuvchi maydonli union yozing: { kind: "square"; side: number } variantini qo’shib, area funksiyasini kengaytiring;
6. string | null qaytaradigan funksiya yozib, natijasini tekshirmasdan ishlatishga urinib ko’ring.

5-qadam eng muhimi: yangi variant qo’shganda TypeScript uni qayerda qayta ishlash kerakligini o’zi ko’rsatadi.

Qisqacha xulosa

• Union tip (string | number) bir nechta tipdan birini qabul qiladi.
• Union qiymatida faqat umumiy metodlarni tekshiruvsiz ishlatish mumkin.
• Toraytirish — typeof, ===, in va instanceof tekshiruvlari orqali tipni aniqlashtirish.
• Literal tip aynan bitta qiymatdan iborat; union ichida ular ruxsat etilgan qiymatlar ro’yxatini beradi.
• Ajratuvchi maydonli union (kind) TypeScript’ga qaysi variant ekanini aniq aytadi.
• string | null qaytarish chaqiruvchini natijani tekshirishga majbur qiladi.

Keyingi darsda enum va as const — nomlangan doimiylar to’plamini yaratishning ikki yo’li.