Type ба Interface ялгаа

TypeScript-д өгөгдлийн бүтцийг тодорхойлох хоёр арга байдаг: type alias ба interface. Хоёулаа маш төстэй боловч чухал ялгаатай талуудтай. Энэ хичээлд тэдгээрийг хэзээ, хэрхэн ашиглахыг сурна.

Үндсэн синтакс

Хоёулаа объектын бүтцийг тодорхойлж чаддаг:

// interface ашиглан
interface Хэрэглэгч {
  нэр: string;
  нас: number;
  имэйл: string;
}

// type ашиглан
type Хэрэглэгч = {
  нэр: string;
  нас: number;
  имэйл: string;
};

// Хоёулаа адилхан хэрэглэгддэг
const хэрэглэгч: Хэрэглэгч = {
  нэр: "Болд",
  нас: 25,
  имэйл: "bold@example.com",
};

Ийм энгийн тохиолдолд хоёрын хооронд ялгаа байхгүй. Гэхдээ илүү нарийн тохиолдолд ялгаа гарч ирдэг.

Interface-ийн давуу тал: өвлөлт ба нэмэлт

interface нь extends ашиглан өргөжүүлэх боломжтой:

interface Амьтан {
  нэр: string;
  нас: number;
}

interface Нохой extends Амьтан {
  үүлдэр: string;
}

interface Тэжээвэр extends Амьтан {
  эзэн: string;
}

// Interface нэгтгэх — Declaration Merging
interface Хэрэглэгч {
  нэр: string;
}

interface Хэрэглэгч {
  нас: number; // TypeScript хоёрыг автоматаар нийлүүлнэ
}

const х: Хэрэглэгч = { нэр: "Болд", нас: 25 }; // Алдаагүй!

Declaration Merging гэдэг нь нэг нэртэй хоёр interface автоматаар нэгтгэгддэг онцлог юм. Энэ нь type-д байдаггүй — нэг нэртэй хоёр type тодорхойлбол алдаа гарна.

Type-ийн давуу тал: уян хатан тодорхойлолт

type нь interface-аас илүү олон зүйлийг илэрхийлж чаддаг:

// Union type — interface-ээр хийж болохгүй
type Үр дүн = "амжилттай" | "амжилтгүй" | "хүлээгдэж байна";

// Intersection type
type Ажилтан = Хэрэглэгч & {
  ажилтны дугаар: number;
};

// Primitive type alias
type Мөр = string;
type Тоо = number;

// Tuple
type Координат = [number, number];
const цэг: Координат = [47.9, 106.9]; // Улаанбаатарын координат

// Function type
type Нэмэх = (а: number, б: number) => number;

interface нь зөвхөн объектын бүтцийг тодорхойлдог. Харин type нь дурын төрлийг нэрлэж болдог.

Харьцуулсан хүснэгт

| Шинж чанар | interface | type | | ------------------- | ----------- | ------------ | | Объект тодорхойлох | Тийм ✅ | Тийм ✅ | | extends ашиглах | Тийм ✅ | & ашиглана | | Declaration Merging | Тийм ✅ | Үгүй ❌ | | Union тодорхойлох | Үгүй ❌ | Тийм ✅ | | Primitive нэрлэх | Үгүй ❌ | Тийм ✅ | | Tuple тодорхойлох | Үгүй ❌ | Тийм ✅ |

Хэзээ аль нэгийг ашиглах вэ?

Практик дүрэм:

// ✅ interface — объект, класс, React props-д хэрэглэ
interface ButtonProps {
  шошго: string;
  дарагдсан: () => void;
  идэвхгүй?: boolean;
}

// ✅ type — union, intersection, primitive-д хэрэглэ
type Өнгө = "улаан" | "ногоон" | "цэнхэр";
type Хариу =
  | { амжилттай: true; өгөгдөл: string }
  | { амжилттай: false; алдаа: string };

TypeScript-ийн баг болон томоохон төслүүд (React, Angular) ерөнхийдөө объектод interface, бусад тохиолдолд type хэрэглэхийг санал болгодог. Гэхдээ хамгийн чухал зүйл бол нэг байдлаар хэрэглэх — аль нэгийг сонгоод тогтмол мөрд хэрэглэ.

Дараагийн хичээлд:

Функцийн параметр, буцаах утга болон callback-д яг ямар төрлүүдийг хэрхэн тодорхойлохыг сурна.