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

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة

أنماط التصميم في TypeScript: دليل عملي



أنماط التصميم (design patterns) هي حلول مجربة للمشكلات النمطية في تطوير البرمجيات. في TypeScript، بفضل الكتابة الصارمة وإمكانيات البرمجة كائنية التوجه، يتم تنفيذ العديد من الأنماط بشكل أنيق وآمن. في هذه المقالة، سنشرح أربعة أنماط رئيسية مع أمثلة كود واقعية ستساعدك على كتابة كود أكثر مرونة وقابلية للصيانة.



1. Singleton (مفرد)



يضمن نمط Singleton وجود مثيل واحد فقط للفئة، ويوفر نقطة وصول عالمية إليه. في TypeScript، هذا مفيد بشكل خاص لإدارة تكوين التطبيق أو اتصالات قاعدة البيانات.



التنفيذ باستخدام مُنشئ خاص وطريقة ثابتة:



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

private constructor() { this.connection = 'PostgreSQL connected'; }

public static getInstance(): DatabaseConnection { if (!DatabaseConnection.instance) { DatabaseConnection.instance = new DatabaseConnection(); } return DatabaseConnection.instance; }

public query(sql: string): void { console.log(`Executing query: ${sql} on ${this.connection}`); }}

// الاستخدامconst db1 = DatabaseConnection.getInstance();const db2 = DatabaseConnection.getInstance();console.log(db1 === db2); // true - نفس الكائنdb1.query('SELECT * FROM users');


متى تستخدم: للمسجلات، وذاكرة التخزين المؤقت، ومجموعات الخيوط، وإعدادات التطبيق. تجنب Singleton للحالات التي قد تتغير في بيئة متعددة الخيوط.



2. Factory Method (طريقة المصنع)



يحدد Factory Method واجهة لإنشاء كائن، لكنه يسمح للفئات الفرعية بتغيير نوع الكائن الذي يتم إنشاؤه. في TypeScript، يتناسب هذا بشكل ممتاز مع الواجهات والفئات المجردة.



مثال لإنشاء أنواع مختلفة من الإشعارات:



interface Notification {  send(message: string): void;}

class EmailNotification implements Notification { public send(message: string): void { console.log(`Email sent: ${message}`); }}

class SMSNotification implements Notification { public send(message: string): void { console.log(`SMS sent: ${message}`); }}

abstract class NotificationFactory { public abstract createNotification(): Notification;

public notifyUser(message: string): void { const notification = this.createNotification(); notification.send(message); }}

class EmailNotificationFactory extends NotificationFactory { public createNotification(): Notification { return new EmailNotification(); }}

class SMSNotificationFactory extends NotificationFactory { public createNotification(): Notification { return new SMSNotification(); }}

// الاستخدامconst factory: NotificationFactory = new EmailNotificationFactory();factory.notifyUser('Your order has been shipped!');


متى تستخدم: عندما لا يكون معروفًا مسبقًا أي فئة محددة ستكون مطلوبة، أو عندما يكون منطق إنشاء الكائن معقدًا ويجب أن يكون مركزيًا.



3. Observer (مراقب)



يحدد Observer علاقة "واحد إلى متعدد" بين الكائنات: عندما تتغير حالة كائن واحد، يتم إخطار جميع الكائنات التابعة تلقائيًا. في TypeScript، غالبًا ما يتم تنفيذ ذلك من خلال الأدوية (generics) لكتابة الأحداث.



مثال لنظام الاشتراكات في الأخبار:



interface Observer<T> {  update(data: T): void;}

class NewsPublisher<T> { private observers: Observer<T>[] = [];

public subscribe(observer: Observer<T>): void { this.observers.push(observer); }

public unsubscribe(observer: Observer<T>): void { this.observers = this.observers.filter(obs => o

المدونات

توصيات الكتب