أنماط التصميم في TypeScript: أمثلة وتنفيذ

أنماط التصميم في TypeScript: من النظرية إلى التطبيق

أنماط التصميم (Design Patterns) هي حلول مجربة للمشكلات النمطية في تطوير البرمجيات. في سياق TypeScript، مع نظام الأنواع القوي ودعم البرمجة كائنية التوجه (OOP)، تحصل العديد من الأنماط الكلاسيكية من كتاب "عصابة الأربعة" (GoF) على تجسيد جديد أكثر أناقة. في هذه المقالة، سنشرح ثلاثة أنماط رئيسية مع أمثلة حقيقية باستخدام TypeScript، والتي ستساعدك على كتابة كود أكثر نظافة وقابلية للتوسع والصيانة.

1. النمط الإنشائي: Singleton (المفرد)

الغرض: يضمن وجود مثيل واحد فقط للفئة، ويوفر نقطة وصول عالمية إليه.

في TypeScript، يكون تنفيذ Singleton مناسبًا بشكل خاص بفضل الخصائص الثابتة (static properties) والمنشئات الخاصة (private constructors). هذا النمط مثالي لإدارة اتصالات قاعدة البيانات، أو المسجلات (loggers)، أو التخزين المؤقت (caches).

class DatabaseConnection {    private static instance: DatabaseConnection;    private connectionString: string;

    private constructor(connectionString: string) {        this.connectionString = connectionString;        console.log(`تم إنشاء اتصال بـ: ${connectionString}`);    }

    public static getInstance(connectionString?: string): DatabaseConnection {        if (!DatabaseConnection.instance) {            if (!connectionString) {                throw new Error("Connection string required for first initialization");            }            DatabaseConnection.instance = new DatabaseConnection(connectionString);        }        return DatabaseConnection.instance;    }

    public query(sql: string): void {        console.log(`تنفيذ الاستعلام: ${sql} على ${this.connectionString}`);    }}

// الاستخدامconst db1 = DatabaseConnection.getInstance("postgres://localhost:5432/mydb");const db2 = DatabaseConnection.getInstance();

console.log(db1 === db2); // true — نفس الكائنdb1.query("SELECT * FROM users");

مهم: في TypeScript، يمكن استخدام readonly والأدوية (generics) لتنفيذات أكثر مرونة. لكن تذكر أن Singleton قد يعقد الاختبار — فكر في حقن التبعيات (DI) كبديل.

2. النمط الهيكلي: Decorator (المزخرف)

الغرض: يضيف ديناميكيًا مسؤوليات جديدة إلى كائن دون تغيير هيكله. في TypeScript، المزخرفات (decorators) هي ميزة من الدرجة الأولى في اللغة (تجريبية في ES5، لكنها تُستخدم بنشاط في Angular و NestJS).

لننظر إلى مثال مع مزخرف لتسجيل استدعاءات الدوال:

// الواجهة المستهدفةinterface ILogger {    log(message: string): void;}

// الفئة الأساسيةclass SimpleLogger implements ILogger {    public log(message: string): void {        console.log(`[LOG]: ${message}`);    }}

// المزخرف (فئة غلاف)class TimestampDecorator implements ILogger {    private logger: ILogger;

    constructor(logger: ILogger) {        this.logger = logger;    }

    public log(message: string): void {        const timestamp = new Date().toISOString();        this.logger.log(`[${timestamp}] ${message}`);    }}

// مزخرف للتنسيقclass UpperCaseDecorator implements ILogger {    private logger: ILogger;

    constructor(logger: ILogger) {        this.logger = logger;    }

    public log(message: string): void {        this.logger.log(message.toUpperCase());    }}

// الاستخدامlet logger: ILogger = new SimpleLogger();logger.log("مرحبا بالعالم"); // [LOG]: مرحبا بالعالم

logger = new TimestampDecorator(logger);logger = new UpperCaseDecorator(logger);logger.log("المزخرفات تعمل"); // [LOG]: [2025-01-15T10:30:00.000Z] المزخرفات تعمل

نصيحة: في TypeScript، تتوفر أيضًا مزخرفات الفئات والخصائص (بناء جملة @decorator