Chapter 4 — Type Aliases, Union va Intersection Turlari

Bu bob — interfeysdan tashqari, TypeScript'da tip yaratishning yana bir kuchli usuli bo'lgan type kalit so'zini, hamda turlarni birlashtirish (union) va kesishtirish (intersection) usullarini chuqur yoritadi.

---

4.1 Type Alias Asoslari

Simple Explanation

type — istalgan turga (primitiv, obyekt, union va h.k.) "taxallus" (nom) berish imkonini beradi.

Example

index.ts
TypeScriptNusxalash
01type ID = string | number;
02type Point = { x: number; y: number };
03type Callback = (data: string) => void;
04 
05let userId: ID = 42;
06let userId2: ID = "abc-123";
07 
08const origin: Point = { x: 0, y: 0 };

Interface vs Type — Asosiy Farqlar

index.ts
TypeScriptNusxalash
01// Interface — faqat obyekt shakllari uchun, extends orqali kengaytiriladi
02interface User { name: string; }
03interface Admin extends User { role: string; }
04 
05// Type — istalgan tur uchun, & orqali birlashtiriladi
06type UserT = { name: string; };
07type AdminT = UserT & { role: string; };

4.2 Union Types (|)

Simple Explanation

Union type — qiymat bir nechta turdan BIRI bo'lishi mumkinligini bildiradi.

Example

index.ts
TypeScriptNusxalash
01type Status = "loading" | "success" | "error";
02 
03function handleStatus(status: Status) {
04  if (status === "loading") {
05    console.log("Yuklanmoqda...");
06  } else if (status === "success") {
07    console.log("Muvaffaqiyatli!");
08  } else {
09    console.log("Xatolik yuz berdi");
10  }
11}
12 
13handleStatus("loading");   // TO'G'RI
14handleStatus("pending");   // XATO: 'pending' 'Status'ga mos kelmaydi

⚠️ Common Mistake
Union type'dagi barcha variantlarga umumiy bo'lmagan metod/xususiyatga to'g'ridan-to'g'ri murojaat qilish — TypeScript bunga yo'l qo'ymaydi, chunki qiymat variantlardan qaysi biri ekani aniq emas.

index.ts
TypeScriptNusxalash
01function printLength(value: string | number) {
02  console.log(value.length); // XATO: 'number' turida 'length' mavjud emas
03}

4.3 Intersection Types (&)

Simple Explanation

Intersection type — bir nechta turni birlashtirib, natijada barcha turlarning xususiyatlariga BIRDANIGA ega bo'lgan yangi tur yaratadi.

Example

index.ts
TypeScriptNusxalash
01type Timestamped = { createdAt: Date; updatedAt: Date };
02type Named = { name: string };
03 
04type Article = Timestamped & Named & {
05  content: string;
06};
07 
08const article: Article = {
09  name: "Birinchi maqola",
10  content: "Maqola matni...",
11  createdAt: new Date(),
12  updatedAt: new Date(),
13};

💡 Key Idea
Union (|) — "YOKI" degan ma'noni bildiradi (bittasidan biri), Intersection (&) — "VA" degan ma'noni bildiradi (barchasi birgalikda).

4.4 Interface vs Type: Qachon Qaysi Birini Tanlash Kerak?

Simple Explanation

Ko'p hollarda ikkalasi ham deyarli bir xil ishlaydi, lekin bir nechta amaliy farq mavjud:

• Interface — "declaration merging" (bir xil nomli interfeys bir necha marta e'lon qilinsa, ular birlashadi) qo'llab-quvvatlaydi, type esa yo'q.
• Type — union, intersection, primitiv taxalluslar va murakkabroq turlar (masalan mapped/conditional types) uchun kerak, bularni interfeys bilan qilib bo'lmaydi.

Example — Declaration Merging (faqat interface)

index.ts
TypeScriptNusxalash
01interface Window {
02  title: string;
03}
04interface Window {
05  update(newTitle: string): void;
06}
07// Natijada Window — ikkala maydonga ham ega bo'ladi

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: "pending" | "approved" | "rejected" union type'iga ega RequestStatus type alias yarating va uni qabul qiluvchi funksiya yozing.

🟡 Exercise 2 — Medium

Task: WithId (id: number) va WithTimestamp (createdAt: Date) type'larini yaratib, ularni intersection orqali birlashtiring va yangi obyekt yarating.

🔴 Exercise 3 — Hard

Task: success: true yoki success: false holatlariga qarab turli maydonlarga ega bo'lgan ApiResponse union type'ini yarating (bu — keyingi bobda chuqur o'rganiladigan "discriminated union"ning kirish darajasi).

🔮 Predict the Output (Type Error)

index.ts
TypeScriptNusxalash
01type Shape = { kind: "circle"; radius: number } | { kind: "square"; side: number };
02 
03function getArea(shape: Shape) {
04  return shape.radius * shape.radius * 3.14;
05}

🧠 Think first! Bu compile vaqtida xato beradimi?

<details> <summary>Answer</summary> Ha, xato beradi: `Property 'radius' does not exist on type '{ kind: "square"; side: number }'`.

Why?
shape — union type, u ikkala variantdan biri bo'lishi mumkin. shape.radiusga to'g'ridan-to'g'ri murojaat qilish — agar shape aslida "square" bo'lsa, radius mavjud emasligini hisobga olmaydi. Bu muammoni yechish uchun shape.kindni tekshirish (type narrowing) kerak — bu PART 9'da chuqur o'rganiladi.

</details>

🐛 Debugging Challenge

index.ts
TypeScriptNusxalash
01interface Point { x: number; y: number; }
02interface Point { z: number; }
03 
04const p: Point = { x: 1, y: 2 };

Your Task: Bu kod nega xato beradi?

<details> <summary>Solution</summary> Ikkinchi `interface Point` e'loni — declaration merging orqali birinchisi bilan birlashadi, natijada `Point` — `{ x: number; y: number; z: number }` bo'lib qoladi. `p` obyektida `z` yo'q, shuning uchun xato: `Property 'z' is missing`. Agar bu `type` bilan yozilganda (`type Point = {...}`), ikkinchi e'lon "Duplicate identifier" xatosini bergan bo'lardi — chunki `type` declaration merging'ni qo'llab-quvvatlamaydi. </details>

📌 Chapter Summary

type — istalgan turga (union, intersection, primitiv va h.k.) nom berish imkonini beradi. Union (|) — "YOKI", Intersection (&) — "VA" degan ma'noni bildiradi. interface — faqat obyekt shakllari uchun, lekin declaration merging'ni qo'llab-quvvatlaydi; type — universal, lekin merging'siz.

🎯 Key Takeaways

• type — union/intersection va murakkab turlar uchun zarur
• Union type bilan ishlashda faqat umumiy xususiyatlardan xavfsiz foydalaniladi
• Intersection — bir nechta turning barcha xususiyatlarini birlashtiradi
• interface — declaration merging, type — universallik beradi

⚡ Quick Cheat Sheet

index.ts
TypeScriptNusxalash
01type ID = string | number;
02type Status = "loading" | "success" | "error";
03type Combined = TypeA & TypeB;
04type ApiResponse = { success: true; data: T } | { success: false; error: string };

---