Interface vs Type — farqi nimada?

Savol

TypeScript'da interface va type o'rtasidagi farq nimada va qaysi birini tanlash kerak?

Qisqa javob

Ko'pchilik kundalik holatlarda ular bir-birining o'rnini bosa oladi. Asosiy farqlar: interfaceni to'ldirish mumkin (declaration merging) va u obyektlarning shaklini tasvirlashga moslashgan, type esa union, tuple, primitivlar va hisoblanadigan tiplarni tasvirlay oladi.

Batafsil javob

Faqat type qila oladigan narsalar:

type Status = 'idle' | 'loading' | 'error' // union
type Point = [number, number]              // tuple
type ID = string | number                  // primitiv aliasi

Faqat interface qila oladigan narsalar:

interface Window {
  myGlobal: string // declaration merging — TS mavjud Window bilan birlashtiradi
}

Ikkalasi ham kengaytirishni qo'llab-quvvatlaydi:

interface Animal { name: string }
interface Dog extends Animal { breed: string }

type Animal2 = { name: string }
type Dog2 = Animal2 & { breed: string }

Amaliy tavsiya: kengaytirilishi mumkin bo'lgan obyektlar/klasslarning ochiq API'lari uchun — interface. Union tiplar, kortejlar va murakkab transformatsiyalar uchun — type. Ko'p jamoalar obyektlar uchun standart bo'yicha interfaceni, qolgan barcha narsalar uchun typeni tanlaydi.

Misol

interface Props {
  title: string
  onClose?: () => void
}

type ButtonVariant = 'primary' | 'secondary' | 'ghost'

interface ButtonProps extends Props {
  variant: ButtonVariant
}

Qo'shimcha savollar

• Declaration merging nima va u qachon foydali?
• typeni interface orqali kengaytirish mumkinmi va aksincha?
• TypeScript interface va typedagi tsiklik havolalarni qanday qayta ishlaydi?