TypeScript / Interface үндэс

Interface үндэс

TypeScript-д объектын бүтцийг тодорхойлох хамгийн нийтлэг хэрэгсэл бол interface. Өмнөх хичээлд type alias ашигласан. Interface нь ижил зорилготой боловч объектод зориулагдсан, өвлөлт болон класстай хамтран ажиллах чадвартай.

Interface үүсгэх

interface түлхүүр үгийг ашиглана. Type alias-тай харьцуулбал = тэмдэг байхгүй:

typescript
// Type alias
type Хэрэглэгч = {
  нэр: string;
  нас: number;
};

// Interface — ижил үр дүн, өөр бичиглэл
interface Хэрэглэгч {
  нэр: string;
  нас: number;
}

Interface үүсгэсний дараа type alias шиг ашиглана:

typescript
interface Хичээл {
  гарчиг: string;
  зохиогч: string;
  дугаар: number;
  нийтлэгдсэн: boolean;
}

const хичээл: Хичээл = {
  гарчиг: "TypeScript үндэс",
  зохиогч: "Болд",
  дугаар: 1,
  нийтлэгдсэн: true,
};

console.log(`${хичээл.дугаар}. ${хичээл.гарчиг}`); // 1. TypeScript үндэс

Бүх шинж чанарыг заавал оруулах ёстой. Нэг нь дутуу байвал TypeScript алдаа заана.

Функц дотор Interface ашиглах

Interface-г параметрийн төрөл болгон ашиглах нь функцийн оролтыг тодорхой болгодог:

typescript
interface Хэрэглэгч {
  нэр: string;
  и_мэйл: string;
  xp: number;
}

function мэндчилэх(хэрэглэгч: Хэрэглэгч): string {
  return `Сайн уу, ${хэрэглэгч.нэр}! Таны XP: ${хэрэглэгч.xp}`;
}

function дэвшилт шалгах(хэрэглэгч: Хэрэглэгч): boolean {
  return хэрэглэгч.xp >= 1000;
}

const суралцагч: Хэрэглэгч = {
  нэр: "Энхтүвшин",
  и_мэйл: "enkhtuvshin@example.mn",
  xp: 850,
};

console.log(мэндчилэх(суралцагч));      // Сайн уу, Энхтүвшин! Таны XP: 850
console.log(дэвшилт шалгах(суралцагч)); // false

Хоёр функц нь адил Хэрэглэгч interface ашигладаг тул нэг газраас удирдана.

Interface дотор функц тодорхойлох

Interface-д шинж чанар (property) дээр нэмж аргын гарын үсэг (method signature) бичиж болно:

typescript
interface Тооцоологч {
  утга: number;
  нэмэх(тоо: number): number;
  хасах(тоо: number): number;
  дахин тохируулах(): void;
}

const тооцоологч: Тооцоологч = {
  утга: 0,
  нэмэх(тоо) {
    this.утга += тоо;
    return this.утга;
  },
  хасах(тоо) {
    this.утга -= тоо;
    return this.утга;
  },
  дахин тохируулах() {
    this.утга = 0;
  },
};

тооцоологч.нэмэх(10);
тооцоологч.нэмэх(5);
тооцоологч.хасах(3);
console.log(тооцоологч.утга); // 12

Interface нээлттэй — нэгтгэж болно

TypeScript-ийн interface-ийн онцлог шинж чанар бол нэг нэртэй interface-г хэд хэдэн удаа зарлах боломжтой — TypeScript тэдгээрийг автоматаар нэгтгэнэ:

typescript
interface Хэрэглэгч {
  нэр: string;
  нас: number;
}

interface Хэрэглэгч {
  и_мэйл: string; // Нэмэгдлэй
}

// TypeScript хоёуланг нэгтгэсэн:
// { нэр: string; нас: number; и_мэйл: string }

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

Энэ шинж чанарыг declaration merging гэнэ. Гуравдагч талын library-г өргөтгөхөд маш хэрэгтэй. Type alias дахин зарлах боломжгүй тул энэ ялгаа чухал.

Объект хэлбэрийн шалгалт

Interface ашиглахад объект нэмэлт шинж чанар агуулж байвал TypeScript алдаа заана:

typescript
interface Цэг {
  x: number;
  y: number;
}

// Шууд объект литерал — нэмэлт шинж чанар алдаа гаргана
const цэг: Цэг = { x: 1, y: 2, z: 3 }; // Алдаа! z байж болохгүй

// Хувьсагчаар дамжуулбал — алдаа гарахгүй
const гаднын Цэг = { x: 1, y: 2, z: 3 };
const цэг2: Цэг = гаднын Цэг; // зөв — структурийн нийцэл

TypeScript структурийн нийцэл (structural compatibility) дүрэм дагадаг — шаардлагатай бүх шинж чанар байгаа л бол нийцнэ. Гэхдээ шууд объект литерал нэмэлт шинж чанар агуулж байвал анхааруулна.

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

Interface дотор optional (заавал биш) ба readonly (зөвхөн унших) шинж чанаруудыг хэрхэн тодорхойлохыг судална. Эдгээр нь бодит апп бичихэд өдөр бүр хэрэглэгддэг.

← Өмнөх хичээлType AliasДараах хичээл →Optional ба Readonly шинж чанар