Generics في JavaScript: لماذا تحتاجها وكيف تستخدمها للمبتدئين

ما هي Generics في JavaScript ولماذا تحتاجها؟

تخيل أنك تكتب دالة يجب أن تعمل مع أنواع مختلفة من البيانات - الأرقام، النصوص، الكائنات. بدون Generics (الجينيريكس)، سيكون عليك إما تكرار الكود أو استخدام any، مما يفقدك السيطرة على الأنواع. Generics هي آلية تسمح لك بإنشاء مكونات (دوال، كلاسات، واجهات) تعمل مع أي نوع بيانات، ولكن مع الحفاظ على معلومات النوع.

على الرغم من أن JavaScript هي لغة ذات كتابة ديناميكية، إلا أن نظام Node.js يستخدم بنشاط TypeScript، الذي يضيف الكتابة الثابتة. في TypeScript، تتجلى قوة الجينيريكس بشكل كامل. ومع ذلك، فإن فهم مبادئها مفيد حتى لـ JavaScript النقي - خاصة إذا كنت تكتب مكتبات أو تعمل مع أطر العمل الحديثة.

في هذه المقالة، سنشرح:

\n
• لماذا تحتاج Generics
\n
• كيفية تعريف واستخدام الجينيريكس في TypeScript
\n
• أمثلة لـ Node.js (API، معالجة البيانات)
\n
• القيود وأفضل الممارسات
\n

أساسيات Generics: الصيغة والأمثلة الأساسية

أول جينيريك: دالة الهوية

المثال الكلاسيكي - دالة تعيد ما تستقبله:

// بدون Generics\nfunction identity(value: any): any {\n  return value;\n}\n\n// مع Generics\nfunction identity<T>(value: T): T {\n  return value;\n}\n\n// الاستخدام\nconst num = identity<number>(42);    // num هو number\nconst str = identity<string>('مرحباً'); // str هو string\n

الرمز <T> هو معامل النوع. يمكنك تسميته كما تشاء (T، U، Item)، لكن التقاليد تتطلب استخدام T (من Type).

جينيريكس مع عدة معاملات

أحياناً تحتاج للعمل مع عدة أنواع في وقت واحد:

function pair<T, U>(first: T, second: U): [T, U] {\n  return [first, second];\n}\n\nconst result = pair<number, string>(1, 'واحد');\n// result: [number, string]\n

جينيريكس في الدوال السهمية (Node.js)

في React أو الأدوات المساعدة، غالباً ما تستخدم الدوال السهمية مع الجينيريكس:

const wrapInArray = <T>(item: T): T[] => {\n  return [item];\n};\n\nconst arr = wrapInArray('اختبار'); // arr: string[]\n

تطبيق Generics في مشاريع Node.js الحقيقية

معالجات API مع استجابات محددة الأنواع

تخيل أنك تكتب دالة عامة للاستعلامات إلى API. بدون الجينيريكس، ستفقد أنواع البيانات:

// سيء: any\nasync function fetchData(url: string): Promise<any> {\n  const response = await fetch(url);\n  return response.json();\n}\n\n// جيد: Generics\nasync function fetchData<T>(url: string): Promise<T> {\n  const response = await fetch(url);\n  return response.json();\n}\n\n// الاستخدام\ninterface User {\n  id: number;\n  name: string;\n}\n\nconst user = await fetchData<User>('/api/user/1');\nconsole.log(user.name); // TypeScript يعلم أن name هو string\n

مجموعات بيانات محددة الأنواع

عند العمل مع قواعد البيانات (مثل Prisma أو Mongoose)، تساعد الجينيريكس في إنشاء مستودعات عامة:

class Repository<T extends { id: number }> {\n  private items: T[] = [];\n\n  add(item: T): void {\n    this.items.push(item);\n  }\n\n  getById(id: number): T | undefined {\n    return this.items.find(item => item.id === id);\n  }\n}\n\n// الاستخدام\ninterface Product {\n  id: number;\n  title: string;\n  price: number;\n}\n\nconst productRepo = new Repository<Product>();\nproductRepo.add({ id: 1, title: 'لابتوب', price: 1000 });\nconst laptop = productRepo.getById(1);\n

أغلفة لمعالجة الأخطاء

دالة عامة لـ