TypeScript / Design Patterns TypeScript-д

Design Patterns TypeScript-д

Design pattern бол программ хөгжүүлэлтэд байнга тохиолддог асуудлуудын батлагдсан шийдэл юм. Эдгээрийг цээжлэх биш — ямар нөхцөлд хэрэглэхийг мэдэх нь чухал. TypeScript-ийн төрлийн систем design pattern-уудыг илүү аюулгүй, уншихад хялбар болгодог.

Энэ хичээлд хамгийн түгээмэл гурван pattern — Singleton, Factory, Observer — TypeScript-ааp хэрэгжүүлнэ.

Singleton Pattern

Singleton нь тухайн class-ийн зөвхөн нэг л объект байхыг баталгаажуулдаг. Датабаасын холболт, тохиргоо, лог систем зэрэгт өргөн хэрэглэгддэг.

typescript
class ТохиргооныМенежер {
  // Цорын ганц instance-ийг хадгалах
  private static instance: ТохиргооныМенежер | null = null;

  private тохиргоо: Map<string, string> = new Map();

  // constructor-ийг private болгоно — шууд new хийхийг хориглоно
  private constructor() {
    this.тохиргоо.set("хэл", "mn");
    this.тохиргоо.set("загвар", "харанхуй");
  }

  // Цорын ганц нэвтрэх цэг
  static авах(): ТохиргооныМенежер {
    if (!ТохиргооныМенежер.instance) {
      ТохиргооныМенежер.instance = new ТохиргооныМенежер();
    }
    return ТохиргооныМенежер.instance;
  }

  утгаАвах(түлхүүр: string): string | undefined {
    return this.тохиргоо.get(түлхүүр);
  }

  утгаТохируулах(түлхүүр: string, утга: string): void {
    this.тохиргоо.set(түлхүүр, утга);
  }
}

// Ашиглах
const тохиргоо1 = ТохиргооныМенежер.авах();
const тохиргоо2 = ТохиргооныМенежер.авах();

тохиргоо1.утгаТохируулах("хэл", "en");
console.log(тохиргоо2.утгаАвах("хэл")); // "en" — нэг л объект

console.log(тохиргоо1 === тохиргоо2); // true — яг нэг объект

Factory Pattern

Factory нь объект үүсгэх логикийг нэг газар төвлөрүүлж, new хийх кодыг нуудаг. Ямар class үүсгэхийг нөхцөлөөс хамааруулан шийдэхэд тохиромжтой.

typescript
// Мэдэгдэл (notification) илгээдэг систем

interface Мэдэгдэл {
  илгээх(хүлээн_авагч: string, мэдэгдэл: string): void;
}

class И_МэйлМэдэгдэл implements Мэдэгдэл {
  илгээх(хүлээн_авагч: string, мэдэгдэл: string): void {
    console.log(`И-мэйл → ${хүлээн_авагч}: ${мэдэгдэл}`);
  }
}

class СМСМэдэгдэл implements Мэдэгдэл {
  илгээх(хүлээн_авагч: string, мэдэгдэл: string): void {
    console.log(`СМС → ${хүлээн_авагч}: ${мэдэгдэл}`);
  }
}

class ПушМэдэгдэл implements Мэдэгдэл {
  илгээх(хүлээн_авагч: string, мэдэгдэл: string): void {
    console.log(`Push → ${хүлээн_авагч}: ${мэдэгдэл}`);
  }
}

// Factory — ямар төрлийн мэдэгдэл үүсгэхийг шийдэнэ
type МэдэгдлийнТөрөл = "и_мэйл" | "смс" | "пуш";

class МэдэгдлийнFactory {
  static үүсгэх(төрөл: МэдэгдлийнТөрөл): Мэдэгдэл {
    switch (төрөл) {
      case "и_мэйл":
        return new И_МэйлМэдэгдэл();
      case "смс":
        return new СМСМэдэгдэл();
      case "пуш":
        return new ПушМэдэгдэл();
    }
  }
}

// Ашиглах — ямар class үүсэхийг мэдэх шаардлагагүй
const мэдэгдэл = МэдэгдлийнFactory.үүсгэх("и_мэйл");
мэдэгдэл.илгээх("user@example.com", "Хичээл дууслаа! +10 XP");

Observer Pattern

Observer нь нэг объектод болсон өөрчлөлтийг хэд хэдэн объектод автоматаар мэдэгддэг. Энэ нь JavaScript-ийн event system-ийн суурь зарчим юм.

typescript
// Сонсогч (observer) interface
interface Сонсогч<T> {
  шинэчлэх(өгөгдөл: T): void;
}

// Мэдэгдэл тараагч (subject)
class XPТараагч {
  private сонсогчид: Сонсогч<number>[] = [];
  private _xp: number = 0;

  // Сонсогч нэмэх
  бүртгэх(сонсогч: Сонсогч<number>): void {
    this.сонсогчид.push(сонсогч);
  }

  // Сонсогч хасах
  цуцлах(сонсогч: Сонсогч<number>): void {
    this.сонсогчид = this.сонсогчид.filter((с) => с !== сонсогч);
  }

  // XP нэмэхэд бүх сонсогчид мэдэгдэнэ
  xpНэмэх(хэмжээ: number): void {
    this._xp += хэмжээ;
    this.сонсогчид.forEach((с) => с.шинэчлэх(this._xp));
  }
}

// Сонсогчдын хэрэгжүүлэлт
class ТүвшингийнШалгагч implements Сонсогч<number> {
  шинэчлэх(xp: number): void {
    if (xp >= 100) console.log("🏆 Анхны түвшин хүрлээ!");
    if (xp >= 500) console.log("⭐ Гарамгай суралцагч!");
  }
}

class ДэлгэцийнШинэчлэгч implements Сонсогч<number> {
  шинэчлэх(xp: number): void {
    console.log(`UI шинэчлэгдлээ: ${xp} XP`);
  }
}

// Ашиглах
const тараагч = new XPТараагч();
const түвшин = new ТүвшингийнШалгагч();
const дэлгэц = new ДэлгэцийнШинэчлэгч();

тараагч.бүртгэх(түвшин);
тараагч.бүртгэх(дэлгэц);

тараагч.xpНэмэх(50);  // дэлгэц шинэчлэгдэнэ
тараагч.xpНэмэх(60);  // дэлгэц шинэчлэгдэж, түвшин ахина

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

SOLID зарчмуудыг TypeScript-ааp хэрхэн хэрэгжүүлэх тухай сурна — цэвэр, дахин ашиглагдах код бичих философи.

← Өмнөх хичээлReflect MetadataДараах хичээл →SOLID зарчмууд