TypeScript Interface va Type: Global Dasturchilar uchun E'lon Qilishning Eng Yaxshi Amaliyotlari

JavaScript'ning kengaytmasi bo'lgan TypeScript, butun dunyodagi dasturchilarga statik tiplashtirish orqali mustahkam va kengaytiriladigan ilovalar yaratish imkonini beradi. Tiplarni aniqlash uchun ikkita asosiy konstruksiya mavjud: Interfeyslar (Interfaces) va Turlar (Types). Ularning o'xshashliklari bo'lsa-da, ularning nozik tomonlarini va tegishli qo'llanilish holatlarini tushunish toza, qo'llab-quvvatlanadigan va samarali kod yozish uchun juda muhimdir. Ushbu to'liq qo'llanma TypeScript interfeyslari va turlari o'rtasidagi farqlarni chuqur o'rganib, ulardan loyihalaringizda samarali foydalanish uchun eng yaxshi amaliyotlarni ko'rib chiqadi.

TypeScript Interfeyslarini Tushunish

TypeScript'dagi Interfeys (Interface) - bu obyekt uchun shartnoma (kontrakt) aniqlashning kuchli usulidir. U obyektning shaklini belgilab beradi, ya'ni uning qanday xususiyatlarga ega bo'lishi kerakligini, ularning ma'lumot turlarini va ixtiyoriy ravishda qanday metodlarni amalga oshirishi kerakligini ko'rsatadi. Interfeyslar asosan obyektlarning tuzilishini tasvirlaydi.

Interfeys Sintaksisi va Misol

Interfeysni aniqlash sintaksisi juda oddiy:


interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

const user: User = {
  id: 123,
  name: "Alice Smith",
  email: "alice.smith@example.com",
  isActive: true,
};

Ushbu misolda, User interfeysi foydalanuvchi obyektining tuzilishini belgilaydi. user o'zgaruvchisiga tayinlangan har qanday obyekt ushbu tuzilishga mos kelishi kerak; aks holda, TypeScript kompilyatori xatolik chiqaradi.

Interfeyslarning Asosiy Xususiyatlari

Obyekt Shaklini Aniqlash: Interfeyslar obyektlarning tuzilishini yoki "shaklini" aniqlashda juda yaxshi.
Kengaytiriluvchanlik: Interfeyslarni extends kalit so'zi yordamida osongina kengaytirish mumkin, bu merosxo'rlik va kodni qayta ishlatish imkonini beradi.
E'lonlarni Birlashtirish: TypeScript interfeyslar uchun e'lonlarni birlashtirishni qo'llab-quvvatlaydi, ya'ni siz bir xil interfeysni bir necha marta e'lon qilishingiz mumkin va kompilyator ularni bitta e'longa birlashtiradi.

E'lonlarni Birlashtirish Misoli


interface Window {
  title: string;
}

interface Window {
  height: number;
  width: number;
}

const myWindow: Window = {
  title: "My Application",
  height: 800,
  width: 600,
};

Bu yerda Window interfeysi ikki marta e'lon qilingan. TypeScript ushbu e'lonlarni birlashtirib, title, height va width xususiyatlariga ega bo'lgan bitta interfeysni yaratadi.

TypeScript Turlarini O'rganish

TypeScript'dagi Tur (Type) ma'lumotlar shaklini aniqlash usulini taqdim etadi. Interfeyslardan farqli o'laroq, turlar ko'proq ko'p qirrali bo'lib, primitiv turlar, birlashmalar, kesishmalar va kortejlar kabi kengroq ma'lumotlar tuzilmalarini ifodalay oladi.

Tur Sintaksisi va Misol

Tur taxallusini (type alias) aniqlash sintaksisi quyidagicha:


type Point = {
  x: number;
  y: number;
};

const origin: Point = {
  x: 0,
  y: 0,
};

Ushbu misolda, Point turi x va y koordinatalariga ega bo'lgan nuqta obyektining tuzilishini belgilaydi.

Turlarning Asosiy Xususiyatlari

Birlashma Turlari: Turlar bir nechta turlarning birlashmasini ifodalashi mumkin, bu esa o'zgaruvchiga har xil turdagi qiymatlarni saqlash imkonini beradi.
Kesishma Turlari: Turlar, shuningdek, bir nechta turlarning kesishmasini ifodalashi mumkin, bu barcha turlarning xususiyatlarini bitta turga birlashtiradi.
Primitiv Turlar: Turlar to'g'ridan-to'g'ri string, number, boolean kabi primitiv turlarni ifodalashi mumkin.
Kortej Turlari: Turlar kortejlarni (tuples) aniqlashi mumkin, bu har bir element uchun ma'lum turlarga ega bo'lgan qat'iy uzunlikdagi massivlardir.
Ko'p qirrali: Primitiv ma'lumotlar turlaridan tortib murakkab obyekt shakllarigacha deyarli hamma narsani tasvirlay oladi.

Birlashma Turi Misoli


type Result = {
  success: true;
  data: any;
} | {
  success: false;
  error: string;
};

const successResult: Result = {
  success: true,
  data: { message: "Operation successful!" },
};

const errorResult: Result = {
  success: false,
  error: "An error occurred.",
};

Result turi bu birlashma turidir, u ma'lumotlar bilan muvaffaqiyatli yoki xatolik xabari bilan muvaffaqiyatsiz bo'lishi mumkin. Bu muvaffaqiyatli yoki muvaffaqiyatsiz bo'lishi mumkin bo'lgan operatsiyalar natijasini ifodalash uchun foydalidir.

Kesishma Turi Misoli


type Person = {
  name: string;
  age: number;
};

type Employee = {
  employeeId: string;
  department: string;
};

type EmployeePerson = Person & Employee;

const employee: EmployeePerson = {
  name: "Bob Johnson",
  age: 35,
  employeeId: "EMP123",
  department: "Engineering",
};

EmployeePerson turi kesishma turidir, u Person va Employee turlarining xususiyatlarini birlashtiradi. Bu mavjud turlarni birlashtirib, yangi turlar yaratishga imkon beradi.

Asosiy Farqlar: Interface va Type

Interfeyslar va turlar ikkalasi ham TypeScript'da ma'lumotlar tuzilmalarini aniqlash maqsadiga xizmat qilsa-da, birini ikkinchisidan qachon foydalanish kerakligini belgilaydigan asosiy farqlar mavjud:

E'lonlarni Birlashtirish: Interfeyslar e'lonlarni birlashtirishni qo'llab-quvvatlaydi, turlar esa yo'q. Agar siz tur ta'rifini bir nechta fayllar yoki modullar bo'ylab kengaytirishingiz kerak bo'lsa, odatda interfeyslar afzalroqdir.
Birlashma Turlari: Turlar birlashma turlarini ifodalashi mumkin, interfeyslar esa to'g'ridan-to'g'ri birlashmalarni aniqlay olmaydi. Agar bir nechta har xil turlardan biri bo'lishi mumkin bo'lgan turni aniqlashingiz kerak bo'lsa, tur taxallusidan foydalaning.
Kesishma Turlari: Turlar & operatori yordamida kesishma turlarini yaratishi mumkin. Interfeyslar boshqa interfeyslarni kengaytirib, shunga o'xshash effektga erishishi mumkin, ammo kesishma turlari ko'proq moslashuvchanlikni taklif qiladi.
Primitiv Turlar: Turlar to'g'ridan-to'g'ri primitiv turlarni (string, number, boolean) ifodalashi mumkin, interfeyslar esa asosan obyekt shakllarini aniqlash uchun mo'ljallangan.
Xatolik Xabarlari: Ba'zi dasturchilar, ayniqsa murakkab tur tuzilmalari bilan ishlaganda, interfeyslar turlarga qaraganda biroz aniqroq xatolik xabarlarini taqdim etishini aytishadi.

Eng Yaxshi Amaliyotlar: Interface va Type o'rtasida Tanlov

Interfeyslar va turlar o'rtasida tanlov qilish loyihangizning o'ziga xos talablariga va shaxsiy xohishingizga bog'liq. Quyida e'tiborga olish kerak bo'lgan ba'zi umumiy ko'rsatmalar keltirilgan:

Obyektlarning shaklini aniqlash uchun interfeyslardan foydalaning: Agar siz asosan obyektlarning tuzilishini aniqlashingiz kerak bo'lsa, interfeyslar tabiiy tanlovdir. Ularning kengaytiriluvchanligi va e'lonlarni birlashtirish imkoniyatlari yirik loyihalarda foydali bo'lishi mumkin.
Birlashma turlari, kesishma turlari va primitiv turlar uchun turlardan foydalaning: Turlar birlashmasini, turlar kesishmasini yoki oddiy primitiv turni ifodalashingiz kerak bo'lganda, tur taxallusidan foydalaning.
Kod bazangizda izchillikni saqlang: Interfeyslar yoki turlarni tanlashingizdan qat'i nazar, butun loyihangiz davomida izchillikka intiling. Bir xil uslubdan foydalanish kodning o'qilishi va qo'llab-quvvatlanishini yaxshilaydi.
E'lonlarni birlashtirishni hisobga oling: Agar tur ta'rifini bir nechta fayl yoki modul bo'ylab kengaytirish zaruriyatini kutsangiz, e'lonlarni birlashtirish xususiyati tufayli interfeyslar yaxshiroq tanlovdir.
Ommaviy API'lar uchun interfeyslarni afzal ko'ring: Ommaviy API'larni loyihalashda ko'pincha interfeyslar afzal ko'riladi, chunki ular kengaytiriluvchanroq va API'ngiz iste'molchilariga siz aniqlagan turlarni osongina kengaytirish imkonini beradi.

Amaliy Misollar: Global Ilova Stsenariylari

Keling, interfeyslar va turlarni global ilovada qanday ishlatish mumkinligini ko'rsatish uchun ba'zi amaliy misollarni ko'rib chiqaylik:

1. Foydalanuvchi Profilini Boshqarish (Internatsionalizatsiya)

Aytaylik, siz bir nechta tillarni qo'llab-quvvatlaydigan foydalanuvchi profilini boshqarish tizimini yaratmoqdasiz. Foydalanuvchi profillari tuzilishini aniqlash uchun interfeyslardan va turli til kodlarini ifodalash uchun turlardan foydalanishingiz mumkin:


interface UserProfile {
  id: number;
  name: string;
  email: string;
  preferredLanguage: LanguageCode;
  address: Address;
}

interface Address {
    street: string;
    city: string;
    country: string;
    postalCode: string;
}

type LanguageCode = "en" | "fr" | "es" | "de" | "zh"; // Misol til kodlari

const userProfile: UserProfile = {
  id: 1,
  name: "John Doe",
  email: "john.doe@example.com",
  preferredLanguage: "en",
  address: { street: "123 Main St", city: "Anytown", country: "USA", postalCode: "12345" }
};

Bu yerda UserProfile interfeysi foydalanuvchi profilining tuzilishini, jumladan, uning afzal ko'rgan tilini aniqlaydi. LanguageCode turi qo'llab-quvvatlanadigan tillarni ifodalovchi birlashma turidir. Address interfeysi umumiy global formatni nazarda tutgan holda manzil formatini belgilaydi.

2. Valyuta Konvertatsiyasi (Globallashuv)

Turli valyutalar va ayirboshlash kurslari bilan ishlashi kerak bo'lgan valyuta konvertatsiyasi ilovasini ko'rib chiqing. Valyuta obyektlarining tuzilishini aniqlash uchun interfeyslardan va valyuta kodlarini ifodalash uchun turlardan foydalanishingiz mumkin:


interface Currency {
  code: CurrencyCode;
  name: string;
  symbol: string;
}

interface ExchangeRate {
  baseCurrency: CurrencyCode;
  targetCurrency: CurrencyCode;
  rate: number;
}


type CurrencyCode = "USD" | "EUR" | "GBP" | "JPY" | "CAD"; // Misol valyuta kodlari

const usd: Currency = {
  code: "USD",
  name: "United States Dollar",
  symbol: "$",
};

const exchangeRate: ExchangeRate = {
  baseCurrency: "USD",
  targetCurrency: "EUR",
  rate: 0.85,
};

Currency interfeysi valyuta obyektining tuzilishini, jumladan, uning kodi, nomi va belgisini aniqlaydi. CurrencyCode turi qo'llab-quvvatlanadigan valyuta kodlarini ifodalovchi birlashma turidir. ExchangeRate interfeysi turli valyutalar o'rtasidagi konvertatsiya kurslarini ifodalash uchun ishlatiladi.

3. Ma'lumotlarni Tekshirish (Xalqaro Format)

Turli mamlakatlardagi foydalanuvchilardan ma'lumotlarni qabul qilishda, ma'lumotlarni to'g'ri xalqaro formatga muvofiq tekshirish muhimdir. Masalan, telefon raqamlari mamlakat kodiga qarab turli formatlarga ega. Variatsiyalarni ifodalash uchun turlardan foydalanish mumkin.


type PhoneNumber = {
  countryCode: string;
  number: string;
  isValid: boolean; // To'g'ri/noto'g'ri ma'lumotni ifodalash uchun boolean qo'shing.
};

interface Contact {
   name: string;
   phoneNumber: PhoneNumber;
   email: string;
}


function validatePhoneNumber(phoneNumber: string, countryCode: string): PhoneNumber {
  // countryCode asosida tekshirish mantig'i (masalan, libphonenumber-js kabi kutubxonadan foydalanish)
  // ... Raqamni tekshirish uchun implementatsiya.
  const isValid = true; //vaqtinchalik qiymat

  return { countryCode, number: phoneNumber, isValid };
}

const contact: Contact = {
    name: "Jane Doe",
    phoneNumber: validatePhoneNumber("555-123-4567", "US"), //misol
    email: "jane.doe@email.com",
};


console.log(contact.phoneNumber.isValid); //tekshirish natijasini chiqarish.

Xulosa: TypeScript E'lonlarini O'zlashtirish

TypeScript Interfeyslari va Turlari ma'lumotlar tuzilmalarini aniqlash va kod sifatini oshirish uchun kuchli vositalardir. Ularning farqlarini tushunish va ulardan samarali foydalanish mustahkam, qo'llab-quvvatlanadigan va kengaytiriladigan ilovalarni yaratish uchun muhimdir. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz interfeyslar va turlarni qachon ishlatish haqida ongli qarorlar qabul qilishingiz mumkin, bu esa o'z navbatida TypeScript dasturlash ish jarayonini yaxshilaydi va loyihalaringiz muvaffaqiyatiga hissa qo'shadi.

Yodda tutingki, interfeyslar va turlar o'rtasidagi tanlov ko'pincha shaxsiy xohish va loyiha talablariga bog'liq. Siz va jamoangiz uchun eng yaxshi ishlaydigan yondashuvni topish uchun ikkalasini ham sinab ko'ring. TypeScript'ning tur tizimi kuchini o'zlashtirish, shubhasiz, yanada ishonchli va qo'llab-quvvatlanadigan kodga olib keladi va bu butun dunyodagi dasturchilarga foyda keltiradi.