TypeScript / Utility Types (Partial, Required, Pick, Omit)

Utility Types (Partial, Required, Pick, Omit)

TypeScript-д өргөн хэрэглэгддэг төрлийн хувиргалтуудыг бэлэн хэрэглүүр болгон өгсөн байдаг. Эдгээрийг Utility Types гэдэг. Нэг удаа бичсэн interface-ээс олон хувилбар гаргаж авахад хэрэглэгддэг хамгийн хэрэгтэй TypeScript-ийн онцлогуудын нэг.

Partial — бүх property-г optional болгох

Partial<T> нь T-ийн бүх property-г optional болгодог. Өгөгдлийг хэсэгчлэн шинэчлэх үед хэрэглэнэ:

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

// Partial ашиглавал бүх талбар optional болно
function хэрэглэгч_шинэчлэх(id: number, өөрчлөлт: Partial<Хэрэглэгч>): void {
  console.log(`ID ${id}-г шинэчилж байна:`, өөрчлөлт);
}

// Зарим талбарыг л дамжуулж болно
хэрэглэгч_шинэчлэх(1, { нэр: "Болд" });
хэрэглэгч_шинэчлэх(2, { нас: 30, хот: "Дархан" });
хэрэглэгч_шинэчлэх(3, {}); // Бүгд optional тул хоосон объект ч болно

Partial<Хэрэглэгч> дотроос харвал:

typescript
// TypeScript автоматаар ингэж үздэг
type Partial_Хэрэглэгч = {
  нэр?: string;
  нас?: number;
  имэйл?: string;
  хот?: string;
};

Required — бүх property-г заавал болгох

Required<T> нь Partial-ийн эсрэг — бүх optional property-г заавал болгодог:

typescript
interface Тохиргоо {
  хост?: string;
  порт?: number;
  нэвтрэх_нэр?: string;
  нууц_үг?: string;
}

// Бүх талбар заавал байх ёстой тохиолдолд
function холбогдох(тохиргоо: Required<Тохиргоо>): void {
  console.log(`${тохиргоо.хост}:${тохиргоо.порт}-т холбогдож байна...`);
}

холбогдох({
  хост: "localhost",
  порт: 5432,
  нэвтрэх_нэр: "admin",
  нууц_үг: "1234",
}); // Бүгд заавал — нэг ч орхиж болохгүй

Pick — зарим property-г л авах

Pick<T, K> нь T-ийн зарим property-г л сонгон шинэ төрөл үүсгэдэг:

typescript
interface Бүтээгдэхүүн {
  id: number;
  нэр: string;
  үнэ: number;
  тайлбар: string;
  зураг: string;
  бараа_үлдэгдэл: number;
}

// Жагсаалтад зөвхөн зарим талбар хэрэгтэй
type БүтээгдэхүүнийЖагсаалт = Pick<
  Бүтээгдэхүүн,
  "id" | "нэр" | "үнэ" | "зураг"
>;

function бүтээгдэхүүн_жагсаалт(): БүтээгдэхүүнийЖагсаалт[] {
  return [
    { id: 1, нэр: "Гар утас", үнэ: 1_500_000, зураг: "/phone.jpg" },
    { id: 2, нэр: "Чихэвч", үнэ: 350_000, зураг: "/earbuds.jpg" },
  ];
}

// Дэлгэрэнгүй хуудсанд бүх талбар хэрэгтэй
type БүтээгдэхүүнийДэлгэрэнгүй = Pick<
  Бүтээгдэхүүн,
  "id" | "нэр" | "үнэ" | "тайлбар" | "зураг"
>;

Omit — зарим property-г хасах

Omit<T, K> нь Pick-ийн эсрэг — зарим property-г хасаж үлдсэнийг авна:

typescript
interface Нийтлэл {
  id: number;
  гарчиг: string;
  агуулга: string;
  зохиогч_id: number;
  үүсгэсэн_огноо: Date;
  шинэчилсэн_огноо: Date;
}

// Шинэ нийтлэл үүсгэхэд id ба огноонуудыг хэрэглэгч өгдөггүй
type ШинэНийтлэл = Omit<Нийтлэл, "id" | "үүсгэсэн_огноо" | "шинэчилсэн_огноо">;

function нийтлэл_үүсгэх(өгөгдөл: ШинэНийтлэл): Нийтлэл {
  return {
    ...өгөгдөл,
    id: Math.random(),
    үүсгэсэн_огноо: new Date(),
    шинэчилсэн_огноо: new Date(),
  };
}

нийтлэл_үүсгэх({
  гарчиг: "TypeScript сурах нь",
  агуулга: "...",
  зохиогч_id: 1,
}); // id ба огноо хэрэгтэй гэж шаардахгүй ✅

Хамтад нь ашиглах

Utility Types-ийг хослуулан хэрэглэж болно:

typescript
interface Ажилтан {
  id: number;
  нэр: string;
  цалин: number;
  хэлтэс: string;
  нэвтрэх_нэр: string;
  нууц_үг: string;
}

// Нийтэд харуулах мэдээлэл — нууц үг, нэвтрэх нэрийг хасах
type НийтийнМэдээлэл = Omit<Ажилтан, "нэвтрэх_нэр" | "нууц_үг">;

// Засварлах форм — id хэрэггүй, бусад optional
type ЗасварлахФорм = Partial<Omit<Ажилтан, "id" | "нэвтрэх_нэр" | "нууц_үг">>;

// Хайлтын үр дүн — зөвхөн id ба нэр
type ХайлтынҮрдүн = Pick<Ажилтан, "id" | "нэр" | "хэлтэс">;

Utility Types нь код давтахгүйгээр нэг interface-ээс олон нөхцөлд тохирсон хувилбарыг хурдан гаргаж авдаг. React-ийн props, API endpoint, form-ийн өгөгдлийг тодорхойлоход өдөр тутам хэрэглэгддэг хамгийн практик онцлогуудын нэг.

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

Mapped Types — бүх property дээр автоматаар хувиргалт хийх, utility types-ийн "дотор" хэрхэн ажилладагыг сурна.

← Өмнөх хичээлGeneric классДараах хичээл →Mapped Types