Chapter 11 — Generiklar

Generiklar — TypeScript'ning eng kuchli va, ayni paytda, yangi boshlovchilar uchun eng qiyin tushunchalaridan biri. Bu bob generiklarni noldan, ko'plab bosqichma-bosqich misollar bilan chuqur tushuntiradi.

---

11.1 Generiklar Nima Muammoni Yechadi?

Muammo: any bilan Tip Xavfsizligini Yo'qotish

index.ts
TypeScriptNusxalash
01function getFirstElement(arr: any[]): any {
02  return arr[0];
03}
04 
05const first = getFirstElement([1, 2, 3]);
06first.toUpperCase(); // XATO BERMAYDI (compile vaqtida), lekin runtime'da XATO!

any bilan — TypeScript firstning haqiqiy turini "unutadi", bu esa xato imkoniyatini oldini olmaydi.

Yechim: Generic Funksiya

index.ts
TypeScriptNusxalash
01function getFirstElement<T>(arr: T[]): T {
02  return arr[0];
03}
04 
05const first = getFirstElement([1, 2, 3]);  // T = number deb xulosa chiqariladi
06first.toUpperCase(); // XATO: Property 'toUpperCase' does not exist on type 'number'
07 
08const firstName = getFirstElement(["Ali", "Vali"]); // T = string
09firstName.toUpperCase(); // TO'G'RI ISHLAYDI

Simple Explanation

<T> — "type parameter" (tip parametri). U funksiya chaqirilganda, berilgan argumentga qarab avtomatik "to'ldiriladi" (masalan T = number yoki T = string), va funksiya butun davomida O'SHA aniq turni "eslab qoladi".

11.2 Generic Interfeys va Type Alias'lar

Example

index.ts
TypeScriptNusxalash
01interface Box<T> {
02  value: T;
03}
04 
05const numberBox: Box<number> = { value: 42 };
06const stringBox: Box<string> = { value: "salom" };
07 
08type Pair<A, B> = {
09  first: A;
10  second: B;
11};
12 
13const coordinate: Pair<number, number> = { first: 10, second: 20 };
14const entry: Pair<string, number> = { first: "yosh", second: 26 };

Real-World Misol: API Javob Turi

index.ts
TypeScriptNusxalash
01interface ApiResponse<T> {
02  data: T;
03  status: number;
04  message: string;
05}
06 
07interface User {
08  id: number;
09  name: string;
10}
11 
12const userResponse: ApiResponse<User> = {
13  data: { id: 1, name: "Abbosbek" },
14  status: 200,
15  message: "OK",
16};

11.3 Generic Constraints (Cheklovlar)

Simple Explanation

Ba'zan generic tip parametri "istalgan tur" emas, balki MA'LUM shartga javob beruvchi tur bo'lishi kerak. Bu — extends kalit so'zi orqali "cheklov" (constraint) qo'yish orqali amalga oshiriladi.

Example

index.ts
TypeScriptNusxalash
01// Muammo: T ustida .length ishlatib bo'lmaydi, chunki T istalgan tur bo'lishi mumkin
02function getLength<T>(item: T): number {
03  return item.length; // XATO: Property 'length' does not exist on type 'T'
04}
05 
06// Yechim: constraint qo'shish
07interface HasLength {
08  length: number;
09}
10 
11function getLength<T extends HasLength>(item: T): number {
12  return item.length; // TO'G'RI — T endi "length"ga ega bo'lishi KAFOLATLANGAN
13}
14 
15getLength("salom");        // TO'G'RI — string'da length bor
16getLength([1, 2, 3]);       // TO'G'RI — array'da length bor
17getLength(42);               // XATO: number'da length yo'q

11.4 Bir Nechta Type Parameter va Default Turlar

Example

index.ts
TypeScriptNusxalash
01function merge<T, U>(obj1: T, obj2: U): T & U {
02  return { ...obj1, ...obj2 };
03}
04 
05const merged = merge({ name: "Abbosbek" }, { age: 26 });
06// merged turi: { name: string } & { age: number }
07console.log(merged.name, merged.age);
08 
09// Default generic tur
10interface Container<T = string> {
11  value: T;
12}
13 
14const defaultContainer: Container = { value: "salom" }; // T avtomatik 'string'
15const numberContainer: Container<number> = { value: 42 };

💡 Key Idea
merge funksiyasi — PART 4'da ko'rgan intersection type (&) bilan generiklarni birlashtirib, ikkita har xil turdagi obyektni xavfsiz tarzda birlashtiradigan, to'liq qayta ishlatiluvchi funksiya yaratadi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Istalgan turdagi massivni qabul qilib, uni teskari tartibda qaytaruvchi generic reverseArray<T> funksiyasini yozing.

🟡 Exercise 2 — Medium

Task: id: number maydoniga EGA bo'lishi kerak bo'lgan generic constraint bilan, ID bo'yicha massivdan element topuvchi findById<T extends { id: number }> funksiyasini yozing.

🔴 Exercise 3 — Hard

Task: ApiResponse<T> generic interfeysini yaratib, uni User, Product kabi turli ma'lumot turlari bilan qayta ishlating, va bitta fetchData<T>(url: string): Promise<ApiResponse<T>> funksiyasi yozing (implementatsiyasiz, faqat tur imzosi).

🔮 Predict the Output (Type Error)

index.ts
TypeScriptNusxalash
01function firstOrDefault<T>(arr: T[], defaultValue: T): T {
02  return arr.length > 0 ? arr[0] : defaultValue;
03}
04 
05const result = firstOrDefault([1, 2, 3], "yo'q");

🧠 Think first! Bu compile vaqtida xato beradimi?

<details> <summary>Answer</summary> Ha, xato beradi: `Argument of type 'string' is not assignable to parameter of type 'number'`.

Why?
Birinchi argument ([1, 2, 3])dan TypeScript T = number deb xulosa chiqaradi. Shundan keyin, ikkinchi argument (defaultValue) ham AYNAN shu T (ya'ni number) turida bo'lishi kutiladi — lekin "yo'q" — string.

</details>

🐛 Debugging Challenge

index.ts
TypeScriptNusxalash
01function wrapInArray<T>(value: T) {
02  return [value];
03}
04 
05const numbers = wrapInArray(5);
06const numbers2: string[] = wrapInArray(5); // ?

Your Task: Ikkinchi qator nega xato beradi?

<details> <summary>Solution</summary> `wrapInArray(5)` — `T = number` deb xulosa chiqarib, `number[]` qaytaradi. Ikkinchi qatorda esa uni `string[]` turiga majburlab tayinlashga urinilmoqda, bu turlar mos kelmagani uchun xato beradi: `Type 'number[]' is not assignable to type 'string[]'`. Bu — generiklarning to'g'ri ishlashini ko'rsatuvchi "kutilgan xato" — agar bu xato berilmaganida, generic tizimning o'zi buzilgan bo'lardi. </details>

📌 Chapter Summary

Generiklar — anyning moslashuvchanligini, tip xavfsizligini yo'qotmasdan beradi. <T> — type parameter, u chaqiruv vaqtida aniq turga "to'ldiriladi". Generic constraint (extends) — Tni ma'lum shartga cheklaydi. Bir nechta type parameter va default turlar — generiklarni yanada moslashuvchan qiladi.

🎯 Key Takeaways

• Generiklar — anydan farqli, tip xavfsizligini saqlab qoladi
• TypeScript ko'pincha Tni argumentlardan avtomatik xulosa chiqaradi
• <T extends X> — Tni X "shakli"ga ega turlar bilan cheklaydi
• Bitta chaqiruvda T — barcha parametr/qaytish turlarida izchil bo'lishi kerak

⚡ Quick Cheat Sheet

index.ts
TypeScriptNusxalash
01function identity<T>(value: T): T { return value; }
02interface Box<T> { value: T; }
03function getLen<T extends { length: number }>(x: T): number { return x.length; }
04function merge<T, U>(a: T, b: U): T & U { return { ...a, ...b }; }

---