TypeScript va React Asoslari: To'liq Qo'llanma

1-Qism: TypeScript Asoslari (1 - 13 Mavzular)

TypeScript-ning bosh maqsadi — kod yozish jarayonida xatolarni aniqlashdir.

1. Oddiy Tiplar va Massivlar

• string, number, boolean: Faqat o'z turidagi qiymatni qabul qiladi.
• Massivlar: tur[] ko'rinishida yoziladi. string[] ichiga son qo'shish (.push()) xatodir.

let ism: string = "Samar";
let raqamlar: number[] = [1, 2, 3];
// raqamlar.push("4"); // ❌ XATO! number massivga string qo'shilmaydi.

2. Union Types (Tiplar birlashmasi)

O'zgaruvchiga bir nechta tipni yoki faqat ma'lum bir aniq qiymatlarni cheklab berish usuli (| belgisi bilan).

let ID: string | number; // Ham matn, ham son bo'lishi mumkin
let status: "loading" | "success" = "loading";
// status = "error"; // ❌ XATO! "error" ro'yxatda yo'q.

3. Interface va Optional Property (?)

Obyektlar uchun shablon yaratishda interface ishlatiladi.

• ? (So'roq belgisi): Maydonni ixtiyoriy (kiritish majburiy emas) qiladi.
• readonly: Obyekt yaratilgandan keyin u maydonni o'zgartirishni taqiqlaydi.

interface User {
  readonly id: number;
  name: string;
  age?: number; // Ixtiyoriy maydon
}
const user1: User = { id: 1, name: "Ali" }; // age yozilmasa ham XATO EMAS!
// user1.id = 5; // ❌ XATO! readonly maydon o'zgarmaydi.

4. Interface vs Type (Imtihon Fişkasi)

• interface: Bir xil nomli interfeyslar qayta ochilsa, ular birlashadi (Declaration Merging).
• type: Bir xil nomda qayta e'lon qilib bo'lmaydi (Xato beradi).

interface Animal { name: string; }
interface Animal { age: number; } // Ikkalasi birlashib ketdi!

5. any va unknown Farqi

• any: Tip tekshirishni o'chiradi (Xavfli, ishlatmaslik tavsiya etiladi).
• unknown: Xavfsiz tip. Uni boshqa o'zgaruvchiga tenglashdan oldin if (typeof ...) orqali tekshirish shart.

6. Funksiyalar va void

Funksiya qabul qiladigan parametrlar va qaytaradigan qiymat turi tiplanadi. Agar funksiya hech narsa qaytarmasa, u void bo'ladi va ichida return ishlatilmaydi.

function chopEt(matn: string): void {
  console.log(matn); // Qiymat qaytarmaydi, shunchaki konsolga chiqaradi
}

⚛️ 2-Qism: React JavaScript (14 - 28 Mavzular)

React — Lego bo'laklari kabi Komponentlardan veb-sahifa qurish kutubxonasi.

7. JSX va Komponent Qoidalari

• Komponent nomi: Har doim Katta harf bilan boshlanishi shart (App, Button).
• JSX qoidasi: Ichida JavaScript yozish uchun figurali qavs {} ishlatiladi. HTML classi o'rniga className yoziladi.
• Ota teg qoidasi: Komponent faqat bitta ota teg qaytarishi shart. Ortiqcha div bo'lmasligi uchun React Fragment (<> ... >) ishlatiladi.

8. Props vs State (Eng muhim farq)

• Props: Ota komponentdan bolaga beriladigan ma'lumot. Faqat o'qish uchun (Read-Only), bola uni ichkarida o'zgartira olmaydi.
• State (useState): Komponentning shaxsiy ichki xotirasi. U o'zgarganda React sahifani qayta chizadi (re-render).

// State to'g'ri o'zgartirish qoidasi:
const [count, setCount] = useState(0);
// count = count + 1; // ❌ MUTLAQO XATO!
setCount(count + 1);  // ✅ TO'G'RI!

9. useState Asinxronlik Tuzog'i

State o'zgartirilgan qatorning o'zida yangi qiymatga o'tmaydi, u faqat keyingi renderda yangilanadi.

setCount(count + 1);
console.log(count); // ❌ Baribir eski qiymatni (0) ko'rsatadi!

10. useEffect va uning Massiv bog'liqligi ([])

Tashqi dunyo (API) bilan ishlash uchun ishlatiladi. Oxiridagi qavsga qarab ishlashi o'zgaradi:

1. useEffect(() => {}, []) (Bo'sh massiv) — Faqat 1 marta, sahifa yuklanganda ishlaydi.
2. useEffect(() => {}, [count]) — Sahifa yuklanganda va har safar count o'zgarganda ishlaydi.
3. Cleanup (Tozalash) funksiyasi: Ichidan funksiya qaytarilsa (return () => {}), komponent o'chayotganda taymer yoki xotirani tozalaydi.

11. Ro'yxat chizish (.map()) va key Atributi

Massiv elementlarini ekranga chiqarishda .map() ishlatiladi va birinchi HTML tegiga noyob key atributi berilishi shart (React elementlarni tanib olishi uchun). Eng yaxshi key — ma'lumotning o'z idsidir.

🛑 IMTIHONDA KO'P TUSHADIGAN "TUZOQLAR" JADVALI