أنماط التصميم في TypeScript: المستوى المتقدم مع أمثلة

أنماط التصميم في TypeScript: مستوى متقدم مع أمثلة

عندما يتم إتقان الأنماط الأساسية (Singleton، Factory Method، Observer)، يحين الوقت لحلول معمارية أكثر تعقيدًا. TypeScript مع نظام الأنواع القوي، والأدوية (Generics)، والمزينات (Decorators) يفتح إمكانيات جديدة لتنفيذ أنماط GoF المتقدمة. في هذه المقالة، سنشرح أربعة أنماط رئيسية: Abstract Factory، Builder، Chain of Responsibility و Strategy — مع التركيز على الميزات الخاصة بـ TypeScript.

1. Abstract Factory مع عائلات مصنفة بالأنواع

نمط "Abstract Factory" يسمح بإنشاء عائلات من الكائنات المترابطة دون الارتباط بفئات محددة. في TypeScript يمكننا استخدام الواجهات (Interfaces) والأدوية (Generics) لتصنيف المنتجات بدقة.

مثال: إنشاء مكونات واجهة مستخدم لأنظمة تشغيل مختلفة.

// منتجات مجردةinterface Button {  render(): void;  click(): void;}

interface Checkbox {  render(): void;  toggle(): void;}

// منتجات محددة لنظام Windowsclass WinButton implements Button {  render() { console.log('رسم زر Windows'); }  click() { console.log('نقر على زر Windows'); }}

class WinCheckbox implements Checkbox {  render() { console.log('رسم مربع اختيار Windows'); }  toggle() { console.log('تبديل مربع اختيار Windows'); }}

// منتجات محددة لنظام macOSclass MacButton implements Button {  render() { console.log('رسم زر macOS'); }  click() { console.log('نقر على زر macOS'); }}

class MacCheckbox implements Checkbox {  render() { console.log('رسم مربع اختيار macOS'); }  toggle() { console.log('تبديل مربع اختيار macOS'); }}

// Abstract Factoryinterface GUIFactory {  createButton(): Button;  createCheckbox(): Checkbox;}

// مصانع محددةclass WinFactory implements GUIFactory {  createButton(): Button { return new WinButton(); }  createCheckbox(): Checkbox { return new WinCheckbox(); }}

class MacFactory implements GUIFactory {  createButton(): Button { return new MacButton(); }  createCheckbox(): Checkbox { return new MacCheckbox(); }}

// الاستخدامfunction createUI(factory: GUIFactory) {  const button = factory.createButton();  const checkbox = factory.createCheckbox();  button.render();  checkbox.render();}

createUI(new WinFactory());// رسم زر Windows// رسم مربع اختيار Windows

تقنية متقدمة: استخدم الأدوية (Generics) إذا كان المصنع يجب أن يعمل مع أنواع مختلفة من المنتجات:

abstract class AbstractFactory<TProduct> {  abstract createProduct(): TProduct;}

class ConcreteFactory extends AbstractFactory<Button> {  createProduct(): Button {    return new WinButton();  }}

2. Builder مع واجهة fluent والثبات (Immutability)

نمط "Builder" مفيد عندما يحتوي الكائن على العديد من المعاملات الاختيارية. TypeScript يسمح بإنشاء builder آمن من حيث الأنواع مع سلسلة من الدوال.

مثال: تكوين طلب HTTP.

class HttpRequest {  private constructor(    public readonly url: string,    public readonly method: 'GET' | 'POST' | 'PUT',    public readonly headers: Record<string, string>,    public readonly body?: string  ) {}

  static builder(): HttpRequestBuilder {    return new HttpRequestBuilder();  }}

class HttpRequestBuilder {  private url: string = '';  private method: 'GET' | 'POST' | 'PUT' = 'GET';  private headers: Record<string, string> = {};  private body?: string;

  setUrl(url: string): this {    this.url = url;    return this;  }

  setMethod(method: 'GET' | 'POST' | 'PUT'): this {    this.method = method;    return this;  }

  addH