Chapter 16 — TypeScript Debugging Laboratoriyasi

Handbook davomida ko'rgan barcha muammolarni birlashtiruvchi maxsus debugging mashqlari to'plami.

---

16.1 Bug 1 — any bilan Yashiringan Xato

index.ts
TypeScriptNusxalash
01function processResponse(response: any) {
02  return response.data.items.map((item: any) => item.name);
03}

Your Task: Bu funksiya nega runtime'da xato berishi mumkin, garchi compile vaqtida hech qanday xato ko'rsatmasa ham?

<details> <summary>Diagnosis & Fix</summary> `any` — barcha tip tekshiruvini o'chiradi. Agar `response.data` yoki `response.data.items` mavjud bo'lmasa (masalan API xato qaytarsa), runtime'da `Cannot read property 'items' of undefined` xatosi yuz beradi, va TypeScript bu haqda hech qanday oldindan ogohlantirish bermaydi. Yechim — aniq interfeys yaratish: ```typescript interface ApiResponse { data: { items: { name: string }[] }; } function processResponse(response: ApiResponse) { return response.data.items.map((item) => item.name); } ``` </details>

16.2 Bug 2 — Noto'g'ri Type Narrowing

index.ts
TypeScriptNusxalash
01function getDiscount(user: { role: "admin" | "user"; discount?: number }) {
02  if (user.discount) {
03    return user.discount * 100;
04  }
05  return 0;
06}
07 
08const result = getDiscount({ role: "user", discount: 0 });
09console.log(result); // Kutilgan: 0, lekin nima chiqadi?

Your Task: discount: 0 berilganda, funksiya qanday natija qaytaradi va bu kutilganmi?

<details> <summary>Diagnosis & Fix</summary> `if (user.discount)` — truthiness tekshiruvi, `0` esa "falsy" hisoblanadi! Shuning uchun `discount: 0` berilganda ham, funksiya `0`ni qaytaradi (chunki `if` bloki ishga tushmaydi va `return 0;` ishlaydi) — bu holatda tasodifan "to'g'ri" natija chiqadi, lekin mantiq noto'g'ri (agar `discount: 0` maxsus ma'noga ega bo'lsa, masalan "chegirma yo'q" emas, "0% chegirma qo'llanilgan" degan holatni ifodalasa, bu farqni yo'qotadi). To'g'riroq tekshiruv: ```typescript if (user.discount !== undefined) { return user.discount * 100; } ``` </details>

16.3 Bug 3 — Interface va Type Chalkashligi

index.ts
TypeScriptNusxalash
01type Status = "active" | "inactive";
02 
03interface UserFilter {
04  status: Status;
05}
06 
07function filterUsers(filter: UserFilter | Status) {
08  console.log(filter.status); // ?
09}

Your Task: Bu kod nega xato beradi?

<details> <summary>Diagnosis & Fix</summary> `filter` — `UserFilter | Status` union'ida, ya'ni yo `UserFilter` obyekti, yo `Status` (oddiy string) bo'lishi mumkin. Agar `filter` aslida `Status` (masalan `"active"`) bo'lsa, uning `.status` xususiyati yo'q — stringlarda `status` degan maydon mavjud emas. Yechim — narrowing: ```typescript function filterUsers(filter: UserFilter | Status) { if (typeof filter === "object") { console.log(filter.status); } else { console.log(filter); } } ``` </details>

16.4 Bug 4 — Generic Constraint Yetishmasligi

index.ts
TypeScriptNusxalash
01function getProperty<T>(obj: T, key: string) {
02  return obj[key]; // ?
03}

Your Task: Bu funksiya nega xato beradi?

<details> <summary>Diagnosis & Fix</summary> `obj[key]` — `T` istalgan tur bo'lishi mumkin, va `key` istalgan `string` bo'lishi mumkin, shuning uchun TypeScript `key`ning `T`da haqiqatan mavjud ekanini "bilmaydi". Yechim — `keyof` bilan constraint: ```typescript function getProperty<T, K extends keyof T>(obj: T, key: K) { return obj[key]; // TO'G'RI — key endi T'ning haqiqiy kaliti bo'lishi kafolatlangan } ``` </details>

16.5 Bug 5 — Exhaustiveness Check Yetishmasligi

index.ts
TypeScriptNusxalash
01type Action = { type: "add"; value: number } | { type: "remove"; value: number };
02 
03function reducer(state: number, action: Action): number {
04  if (action.type === "add") {
05    return state + action.value;
06  }
07  if (action.type === "remove") {
08    return state - action.value;
09  }
10  return state; // Kelajakda yangi 'type' qo'shilsa, bu unutilib qolishi mumkin
11}

Your Task: Bu kodning "yashirin" zaifligi nima?

<details> <summary>Diagnosis & Fix</summary> Agar kelajakda `Action`ga yangi variant (masalan `{ type: "reset" }`) qo'shilsa, bu funksiya uni "sezmasdan" oxirgi `return state;` orqali e'tiborsiz qoldiradi — hech qanday compile xatosi bo'lmaydi. Yechim — `switch` + exhaustiveness check (PART 14): ```typescript function reducer(state: number, action: Action): number { switch (action.type) { case "add": return state + action.value; case "remove": return state - action.value; default: const _exhaustive: never = action; return state; } } ``` </details>

📝 Practice Exercises

🔴 Exercise 1 — Hard

Task: Yuqoridagi 5 ta bugning barchasini o'z ichiga olgan (qasddan buzilgan) kichik TypeScript loyihasi yarating va ularni birma-bir tuzating.

📌 Chapter Summary

Bu bob — handbook davomida ko'rilgan eng keng tarqalgan TypeScript xatolarini (any, truthiness narrowing, union type chalkashligi, generic constraint, exhaustiveness) amaliy tarzda mustahkamladi.

🎯 Key Takeaways

• any — imkon qadar qochilishi kerak
• Truthiness tekshiruvlarida 0, "" kabi "falsy" qiymatlarga ehtiyot bo'ling
• Union type bilan ishlashda har doim narrowing qiling
• Generic funksiyalarda kalitlar bilan ishlashda keyof constraint ishlating
• Union'lar bilan switch ishlatganda, exhaustiveness check qo'shing

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01any ishlatilganmi?          → aniq interfeys/type bilan almashtiring
020/"" bilan bog'liq xato?     → !== undefined kabi aniq tekshiruv ishlating
03Union bilan xato?            → typeof/in/instanceof orqali narrowing qiling
04obj[key] xato beryaptimi?    → K extends keyof T constraint qo'shing
05Yangi variant unutilib qoladimi? → switch + never orqali exhaustiveness check qo'shing

---