Chapter 3 — Interfeyslar

Interfeyslar — obyektlarning "shaklini" (shape) tasvirlashning eng ko'p ishlatiladigan usuli. Bu bob interfeyslarni barcha asosiy xususiyatlari bilan chuqur yoritadi.

---

3.1 Asosiy Interfeys Sintaksisi

Simple Explanation

interface — obyekt qanday maydonlarga va turlarga ega bo'lishi kerakligini belgilaydigan "shablon".

Example

index.ts
TypeScriptNusxalash
01interface User {
02  name: string;
03  age: number;
04  isActive: boolean;
05}
06 
07const user: User = {
08  name: "Abbosbek",
09  age: 26,
10  isActive: true,
11};
12 
13// Yetishmayotgan maydon — XATO
14const invalidUser: User = {
15  name: "Vali",
16  age: 20,
17  // isActive yo'q — XATO: Property 'isActive' is missing
18};

3.2 Optional va Readonly Xususiyatlar

Example

index.ts
TypeScriptNusxalash
01interface Product {
02  id: number;
03  name: string;
04  discount?: number;        // optional — bo'lishi shart emas
05  readonly sku: string;     // readonly — yaratilgandan keyin o'zgartirib bo'lmaydi
06}
07 
08const product: Product = { id: 1, name: "Telefon", sku: "TEL-001" };
09// discount berilmagan — muammosiz, chunki u optional
10 
11product.sku = "YANGI-001"; // XATO: Cannot assign to 'sku' because it is a read-only property

⚠️ Common Mistake
readonlyni obyektning "chuqur" (deep) immutability'sini ta'minlaydi deb o'ylash — bu noto'g'ri. readonly faqat bevosita maydonni qayta tayinlashning oldini oladi, agar maydon obyekt yoki massiv bo'lsa, uning ICHKI qiymatlarini hamon o'zgartirish mumkin.

3.3 Interfeysда Metodlar va Funksiya Tiplari

Example

index.ts
TypeScriptNusxalash
01interface Calculator {
02  add(a: number, b: number): number;
03  subtract: (a: number, b: number) => number;
04}
05 
06const calc: Calculator = {
07  add(a, b) { return a + b; },
08  subtract: (a, b) => a - b,
09};

3.4 Interface Extension (Kengaytirish)

Simple Explanation

Interfeyslar extends orqali bir-biridan meros olishi mumkin, bu kodni takrorlamasdan umumiy maydonlarni qayta ishlatish imkonini beradi.

Example

index.ts
TypeScriptNusxalash
01interface Animal {
02  name: string;
03  age: number;
04}
05 
06interface Dog extends Animal {
07  breed: string;
08}
09 
10const myDog: Dog = {
11  name: "Rex",
12  age: 3,
13  breed: "Labrador",
14};
15 
16// Bir nechta interfeysdan meros olish
17interface Employee { salary: number; }
18interface Manager extends Animal, Employee {
19  teamSize: number;
20}

💡 Key Idea
extends — obyekt-orientlashgan dasturlashdagi meros (inheritance) tushunchasiga o'xshaydi, lekin bu yerda faqat "shakl" (tip) darajasida, real xatti-harakat (metod implementatsiyasi) emas.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: id, title, completed maydonlariga ega Todo interfeysi yarating va unga mos obyekt yarating.

🟡 Exercise 2 — Medium

Task: BaseEntity (id, createdAt) interfeysini yaratib, undan Product va User interfeyslarini extends orqali kengaytiring.

🔴 Exercise 3 — Hard

Task: readonly massiv maydoniga ega interfeys yarating va uning "chuqur immutable emasligi"ni amaliy tarzda ko'rsating (massiv ichiga element qo'shish orqali).

🐛 Debugging Challenge

index.ts
TypeScriptNusxalash
01interface Config {
02  readonly apiUrl: string;
03  timeout?: number;
04}
05 
06function setup(config: Config) {
07  config.apiUrl = "https://new-api.com"; // ?
08  if (config.timeout.toString()) {} // ?
09}

Your Task: Bu kodda ikkita xato bor. Ularni toping.

<details> <summary>Solution</summary> 1. `config.apiUrl = "..."` — `apiUrl` `readonly`, uni qayta tayinlash mumkin emas. 2. `config.timeout.toString()` — `timeout` optional (`number | undefined`), u `undefined` bo'lishi mumkin, shuning uchun to'g'ridan-to'g'ri `.toString()` chaqirish xavfli (agar `strictNullChecks` yoqilgan bo'lsa, TypeScript xato beradi). Yechim: ```typescript function setup(config: Config) { if (config.timeout !== undefined) { config.timeout.toString(); } } ``` </details>

📌 Chapter Summary

Interfeyslar — obyekt "shakli"ni tasvirlaydi. ? — ixtiyoriy maydon, readonly — qayta tayinlashni (lekin ichki o'zgartirishni emas) bloklaydi. extends — interfeyslarni kengaytirish, bir nechta interfeysdan meros olish imkoniyati bilan.

🎯 Key Takeaways

• Interfeys — obyektning majburiy va ixtiyoriy maydonlarini belgilaydi
• readonly — sayoz (shallow) immutability, chuqur emas
• extends — bir nechta interfeysdan meros olishga imkon beradi
• Optional maydonlarni ishlatishdan oldin har doim tekshiring

⚡ Quick Cheat Sheet

index.ts
TypeScriptNusxalash
01interface User {
02  id: number;
03  name: string;
04  email?: string;
05  readonly createdAt: Date;
06}
07interface Admin extends User {
08  permissions: string[];
09}

---