Chapter 9 — Literal Turlar va Tip Toraytirish (Narrowing)

Bu — TypeScript'dagi eng kuchli va amaliy jihatdan eng ko'p ishlatiladigan tushunchalardan biri: union type'lar bilan xavfsiz ishlashning kaliti.

---

9.1 Literal Types

Simple Explanation

Literal type — faqat BITTA aniq qiymatni qabul qiladigan tur (masalan faqat "active" so'zi, boshqa hech qanday string emas).

Example

index.ts
TypeScriptNusxalash
01let direction: "left" = "left";
02direction = "right"; // XATO: Type '"right"' is not assignable to type '"left"'
03 
04// Odatda union bilan birga ishlatiladi
05type Direction = "left" | "right" | "up" | "down";

9.2 typeof Type Narrowing

Example

index.ts
TypeScriptNusxalash
01function formatValue(value: string | number) {
02  if (typeof value === "string") {
03    return value.toUpperCase(); // Bu yerda TypeScript value'ni 'string' deb "biladi"
04  }
05  return value.toFixed(2); // Bu yerda 'number' deb "biladi"
06}

Simple Explanation

typeof tekshiruvi — TypeScript'ga "shu shart ichida, value aniq shu turda" deb signal beradi. Bu jarayon "type narrowing" (tur toraytirish) deb ataladi — keng union type, shart ichida torroq, aniqroq turga "toraytiriladi".

9.3 instanceof va in Operatorlari Bilan Narrowing

Example

index.ts
TypeScriptNusxalash
01class Dog { bark() { console.log("Vov!"); } }
02class Cat { meow() { console.log("Miyov!"); } }
03 
04function makeSound(animal: Dog | Cat) {
05  if (animal instanceof Dog) {
06    animal.bark();
07  } else {
08    animal.meow();
09  }
10}
11 
12interface Fish { swim(): void; }
13interface Bird { fly(): void; }
14 
15function move(animal: Fish | Bird) {
16  if ("swim" in animal) {
17    animal.swim();
18  } else {
19    animal.fly();
20  }
21}

9.4 Truthiness va Equality Narrowing

Example

index.ts
TypeScriptNusxalash
01function printLength(value: string | null | undefined) {
02  if (value) { // truthiness narrowing — bo'sh string, null, undefined hammasi "falsy"
03    console.log(value.length);
04  }
05}
06 
07function compare(a: string | number, b: string | number) {
08  if (typeof a === typeof b && typeof a === "string") {
09    // a va b — ikkalasi ham string
10    console.log(a.concat(b as string));
11  }
12}

⚠️ Common Mistake
Truthiness narrowing — null/undefinedni "falsy" deb to'g'ri tekshiradi, lekin bo'sh string ("") yoki 0 kabi boshqa "falsy" qiymatlarni ham tasodifan chetlab qo'yishi mumkin, agar bu hisobga olinmasa.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: string | number union qabul qiluvchi funksiya yozing, typeof orqali narrowing qilib, har biri uchun mos amal bajaring.

🟡 Exercise 2 — Medium

Task: Circle va Square interfeyslarini yaratib, "radius" in shape orqali ularni farqlovchi getArea funksiyasini yozing.

🔴 Exercise 3 — Hard

Task: Bo'sh string va nullni farqlaydigan, faqat null/undefined uchun if (value) o'rniga aniqroq tekshiruv ishlatuvchi funksiya yozing.

🔮 Predict the Output (Type Error)

index.ts
TypeScriptNusxalash
01function processValue(value: string | number) {
02  if (typeof value === "string" || typeof value === "number") {
03    return value.toString();
04  }
05  return value; // ?
06}

🧠 Think first! Oxirgi return value; qatorida TypeScript qanday xato (yoki xato bermaslik) haqida signal beradi?

<details> <summary>Answer</summary> Xato bermaydi, lekin qiziq holat: oxirgi qatorga TypeScript "hech qachon yetib bo'lmaydi" deb tushunishi mumkin, chunki `if` sharti allaqachon BARCHA mumkin bo'lgan turlarni (`string` yoki `number`) qamrab olgan. Bu holda `value`ning turi oxirgi qatorda `never` bo'lib qoladi — bu "exhaustiveness checking" (to'liq qamrov tekshiruvi) deb ataladigan foydali xususiyatga bog'liq, PART 14'da chuqur o'rganiladi. </details>

🐛 Debugging Challenge

index.ts
TypeScriptNusxalash
01function getFirstChar(value: string | string[]) {
02  return value[0].toUpperCase();
03}

Your Task: Bu kod compile vaqtida xato bermaydi, lekin nima uchun bu "tasodifiy ishlash" hisoblanadi, narrowing qilinmagan holda?

<details> <summary>Solution</summary> Bu kod texnik jihatdan ishlaydi, chunki `string[0]` — bitta belgi (string), `string[][0]` — massivning birinchi elementi (string), va ikkalasida ham `.toUpperCase()` mavjud. Lekin bu — "tasodifiy mos kelish", umumiy holatda ishonchli emas. Agar `value` aslida `number[]` bo'lganda (garchi bu funksiya turi bunga ruxsat bermasa ham, kelajakda kod o'zgarishi mumkin), bu yondashuv ishlamay qolardi. Yaxshiroq amaliyot — har doim aniq narrowing qilish: ```typescript function getFirstChar(value: string | string[]) { if (Array.isArray(value)) { return value[0].toUpperCase(); } return value[0].toUpperCase(); } ``` </details>

📌 Chapter Summary

Literal type — aniq bitta qiymatga cheklangan tur. Type narrowing — typeof, instanceof, in, truthiness va boshqa tekshiruvlar orqali, union type'ni shart ichida torroq, aniqroq turga "toraytirish" jarayoni. Bu — union type bilan xavfsiz ishlashning asosiy mexanizmi.

🎯 Key Takeaways

• Literal type — faqat bitta aniq qiymatni qabul qiladi
• typeof — primitivlar orasida narrowing uchun
• instanceof — class instansiyalari orasida narrowing uchun
• in — interfeyslar orasida narrowing uchun
• Truthiness narrowing — ehtiyot bo'lish talab qiladi (bo'sh string/0 muammosi)

⚡ Quick Cheat Sheet

index.ts
TypeScriptNusxalash
01if (typeof x === "string") { }
02if (x instanceof Dog) { }
03if ("swim" in animal) { }
04if (Array.isArray(x)) { }
05if (x != null) { } // null va undefined ikkalasini ham tekshiradi

---