Chapter 5 — Massivlar va Tuple'lar

TypeScript massivlarni ikki xil, kuchli tarzda tiplashga imkon beradi: oddiy (bir turdagi elementlar) massivlar va tuple'lar (aniq uzunlik va tur ketma-ketligiga ega massivlar).

---

5.1 Massiv Tiplarini Belgilash

Simple Explanation

Massiv tipini ikki xil sintaksis bilan yozish mumkin: Type[] yoki Array<Type> — ular funksional jihatdan bir xil.

Example

index.ts
TypeScriptNusxalash
01let names: string[] = ["Ali", "Vali"];
02let scores: Array<number> = [90, 85, 78];
03 
04// Union type massivlar
05let mixed: (string | number)[] = ["Ali", 25, "Vali"];
06 
07// Ichma-ich massivlar
08let matrix: number[][] = [[1, 2], [3, 4]];

⚠️ Common Mistake
(string | number)[] bilan string | number[] orasidagi farqni chalkashtirish. Birinchisi — har bir elementi string YOKI number bo'lishi mumkin bo'lgan massiv. Ikkinchisi — YOKI stringning o'zi, YOKI number[] massivi (butunlay boshqa narsa!).

5.2 readonly Massivlar

Example

index.ts
TypeScriptNusxalash
01let colors: readonly string[] = ["red", "green", "blue"];
02colors.push("yellow");  // XATO: Property 'push' does not exist on type 'readonly string[]'
03colors[0] = "black";    // XATO: Index signature in type 'readonly string[]' only permits reading
04 
05// Alternativ sintaksis
06let colors2: ReadonlyArray<string> = ["red", "green"];

💡 Key Idea
readonly string[] — PART 3'da ko'rgan obyekt readonly xususiyatidan farqli, massivning O'ZINI ham (metodlar orqali, masalan push) o'zgartirishga to'liq yo'l qo'ymaydi — bu ancha "chuqurroq" himoya.

5.3 Tuple Types

Simple Explanation

Tuple — aniq UZUNLIK va har bir POZITSIYADAGI aniq TURга ega massiv. Oddiy massivdan farqli, tuple'da har bir "joy"ning o'z turi bor.

Example

index.ts
TypeScriptNusxalash
01let point: [number, number] = [10, 20];
02let entry: [string, number] = ["yosh", 26];
03 
04// Ixtiyoriy va rest elementlar bilan
05let coordinate: [number, number, number?] = [10, 20]; // z ixtiyoriy
06let numbers: [string, ...number[]] = ["jami", 1, 2, 3];
07 
08// Nomlangan tuple elementlari (o'qish oson bo'lishi uchun)
09let user: [name: string, age: number] = ["Abbosbek", 26];

⚠️ Common Mistake

index.ts
TypeScriptNusxalash
01let point: [number, number] = [10, 20, 30]; // XATO: Source has 3 element(s) but target allows only 2

Tuple — qat'iy uzunlikka ega, undan ortiq yoki kam element berish xato hisoblanadi (rest element ishlatilmagan bo'lsa).

5.4 Real-World Qo'llanilishi: React useState va Function Overload'ga O'xshash Holatlar

Simple Explanation

Tuple'lar ko'pincha "juftlik" yoki "belgilangan tartibdagi qiymatlar to'plami"ni ifodalash uchun ishlatiladi — masalan React'ning useState qaytaradigan [value, setValue] massivi aynan tuple sifatida tiplangan.

Example

index.ts
TypeScriptNusxalash
01function useCounterLike(): [number, () => void] {
02  let count = 0;
03  const increment = () => { count++; };
04  return [count, increment];
05}
06 
07const [count, increment] = useCounterLike();
08// TypeScript 'count'ni number, 'increment'ni funksiya deb "biladi" — tartib muhim!

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Foydalanuvchi ismlaridan iborat string[] massivi va ularning yoshlaridan iborat number[] massivini yarating.

🟡 Exercise 2 — Medium

Task: [latitude: number, longitude: number] tuple turini yarating va uni qabul qiluvchi printCoordinates funksiyasini yozing.

🔴 Exercise 3 — Hard

Task: readonly tuple turini (readonly [number, number]) yarating va uning elementlarini o'zgartirishga urinib, xatoni kuzating.

🐛 Debugging Challenge

index.ts
TypeScriptNusxalash
01function getMinMax(numbers: number[]): [number, number] {
02  const min = Math.min(...numbers);
03  const max = Math.max(...numbers);
04  return [max, min]; // ?
05}
06 
07const [minValue, maxValue] = getMinMax([5, 2, 8, 1]);
08console.log(minValue); // Nima chiqadi?

Your Task: Bu kod compile vaqtida xato bermaydi, lekin natija mantiqan noto'g'ri. Nega?

<details> <summary>Solution</summary> Funksiya `[number, number]` qaytaradi va bu turga mos (ikkala qiymat ham `number`), shuning uchun TypeScript xato bermaydi — lekin funksiya ichida `[max, min]` tartibda qaytarilgan, `getMinMax` nomi esa "min, keyin max" tartibini kutmoqda. Natijada `minValue` o'zgaruvchisi aslida `max` qiymatini oladi! Bu — TypeScript tur xavfsizligini ta'minlasa-da, MANTIQIY (semantik) xatolarni ushlay olmasligini ko'rsatadi. Yechim: `return [min, max];` </details>

📌 Chapter Summary

Massivlar — bir xil turdagi, cheksiz sonli elementlar uchun (string[]). Tuple'lar — aniq uzunlik va har bir pozitsiyada aniq turga ega ketma-ketliklar uchun ([string, number]). readonly — ikkalasiga ham qo'llanilib, mutatsiyani (metodlar orqali ham) to'liq bloklaydi.

🎯 Key Takeaways

• Type[] va Array<Type> — funksional jihatdan bir xil
• Tuple — pozitsiyaga bog'liq, qat'iy uzunlikdagi tur ketma-ketligi
• readonly massiv/tuple — mutatsiya metodlarini butunlay olib tashlaydi
• TypeScript tip xavfsizligini beradi, lekin mantiqiy xatolarni ushlamaydi

⚡ Quick Cheat Sheet

index.ts
TypeScriptNusxalash
01let arr: string[] = ["a", "b"];
02let ro: readonly number[] = [1, 2];
03let tuple: [string, number] = ["age", 26];
04let optTuple: [number, number?] = [1];
05let restTuple: [string, ...number[]] = ["sum", 1, 2, 3];

---