TypeScript type va interface farqi

Oldingi darsda obyekt shakli type bilan e’lon qilindi. Boshqa kodlarda xuddi shu ish interface bilan bajarilganini ko’rasiz.

Savol tabiiy: ikkalasi bir xil ishni qilsa, nega ikkita yozuv bor va qaysi birini tanlash kerak?

Ikkalasi ham bir xil natija beradi

type UserType = {
  id: number;
  name: string;
};

interface UserInterface {
  id: number;
  name: string;
}

const first: UserType = { id: 1, name: "Aziz" };
const second: UserInterface = { id: 2, name: "Malika" };

console.log(first.name, second.name);

Aziz Malika

Ikki yozuvdagi farqlarni sanang: type da tenglik belgisi bor va oxirida nuqtali vergul qo’yiladi, interface da esa ikkalasi ham yo’q. Natija bir xil.

Farq 1: interface o’ziga o’zi qo’shiladi

Bitta interface ni ikki marta e’lon qilsangiz, TypeScript ularni birlashtiradi:

interface Product {
  title: string;
}

interface Product {
  price: number;
}

const item: Product = { title: "Kitob", price: 45000 };
console.log(item);

{ title: 'Kitob', price: 45000 }

Ikkala maydon ham talab qilinadi. Bunga deklaratsiya birlashuvi deyiladi.

type bilan xuddi shunday qilsangiz, xato chiqadi:

type Product = { title: string };
type Product = { price: number };

example.ts(1,6): error TS2300: Duplicate identifier 'Product'.
example.ts(2,6): error TS2300: Duplicate identifier 'Product'.

Birlashuv aynan bitta joyda kerak bo’ladi: begona kutubxonaning tipini kengaytirish. Masalan Express’ning so’rov obyektiga o’z maydoningizni qo’shish.

Farq 2: type obyekt bo’lmagan tiplarni ham nomlaydi

interface faqat obyekt shakli uchun. type esa har qanday tipga nom beradi:

type Identifier = string | number;
type Point = [number, number];
type Handler = (message: string) => void;

const code: Identifier = "A-12";
const position: Point = [41.31, 69.24];

console.log(code, position);

A-12 [ 41.31, 69.24 ]

Bu uchta e’lonni interface bilan yozib bo’lmaydi. Union, kortej va funksiya tipi — faqat type ning ishi.

Farq 3: kengaytirish yozuvi boshqacha

Mavjud shaklga maydon qo’shish ikkalasida ham mumkin, lekin yozuv farq qiladi.

interface da extends ishlatiladi:

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

const dog: Dog = { name: "Rex", breed: "husky" };
console.log(`${dog.name} — ${dog.breed}`);

Rex — husky

type da & belgisi ishlatiladi:

type Point = { x: number; y: number };
type Point3D = Point & { z: number };

const position: Point3D = { x: 1, y: 2, z: 3 };
console.log(position);

{ x: 1, y: 2, z: 3 }

Natija amalda bir xil, yozuv boshqacha.

Jamlangan taqqoslash

Imkoniyat	type	interface
Obyekt shakli	✅	✅
Union (string | number)	✅	❌
Kortej va funksiya tipi	✅	❌
Kengaytirish	& bilan	extends bilan
Ikki marta e’lon qilish	Xato beradi	Birlashadi
Sinf bilan implements	✅	✅

Qaysi birini tanlash

Amalda ishlaydigan qoida:

1. Sukut bo’yicha type ishlating. U hamma narsani qila oladi: obyekt ham, union ham, kortej ham. Bitta kalit so’z yetadi.
2. Begona kutubxona tipini kengaytirish kerak bo’lsa interface tanlang. Deklaratsiya birlashuvi aynan shu holat uchun.
3. Loyihada allaqachon bitta uslub bor bo’lsa, unga amal qiling. Izchillik tanlovdan muhimroq.

Sinflar bilan ishlatish

Ikkalasi ham sinf shaklini belgilashi mumkin:

interface Greeter {
  greet(): string;
}

class Student implements Greeter {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  greet(): string {
    return `Salom, men ${this.name}`;
  }
}

const student = new Student("Aziz");
console.log(student.greet());

Salom, men Aziz

implements — “bu sinf shu shaklga mos keladi” degani. Sinf greet metodini yozmasa, xato chiqadi.

Klasslar darsidagi sintaksis o’zgarmagan, faqat shakl talabi qo’shildi. private — TypeScript qo’shgan belgi: maydonga sinf tashqarisidan murojaat qilinmasligini bildiradi.

Amaliy mashq

1. Bir xil Article shaklini avval type, keyin interface bilan e’lon qiling va ikkalasi ishlashini tekshiring;
2. type ni ikki marta e’lon qilib, TS2300 xato xabarini o’qing;
3. Xuddi shuni interface bilan takrorlang va xato chiqmasligini, maydonlar birlashishini kuzating;
4. string | number union tipini interface bilan yozishga urinib ko’ring va nima uchun imkonsizligini aytib bering;
5. interface da extends, type da & bilan bir xil kengaytirishni bajaring;
6. O’z loyihangiz uchun qaysi uslubni tanlashingizni bitta jumla bilan asoslang.

3-qadam eng muhimi: deklaratsiya birlashuvi jim sodir bo’ladi va katta loyihada chalkashlik manbai bo’lishi mumkin.

Qisqacha xulosa

• type va interface obyekt shaklini bir xil tavsiflaydi.
• type ko’proq narsa qila oladi: union, kortej va funksiya tipi faqat unda yoziladi.
• interface ikki marta e’lon qilinsa birlashadi, type esa TS2300 xatosini beradi.
• Kengaytirish: interface da extends, type da &.
• Sukut bo’yicha type tanlang; begona kutubxona tipini kengaytirish kerak bo’lsa interface.
• Loyihada bitta uslubga amal qiling — izchillik tanlovdan muhimroq.

Keyingi darsda funksiya tiplari — parametr, qaytish qiymati va ixtiyoriy argumentlar.