TypeScript: دليل شامل للتحضير للمقابلة

لماذا TypeScript أمر لا بد منه للمطور الحديث؟

إذا كنت قد فتحت هذه المقالة، فأنت تعلم بالفعل أن TypeScript ليس مجرد "إضافة فوق JavaScript"، بل أداة كاملة تنقذ الخلايا العصبية وخوادم الإنتاج. في مقابلات عام 2025، يتم اختبار معرفة TypeScript في حوالي 80% من الوظائف بمستوى middle+. ولا يتعلق الأمر بكتابة const a: number = 5. يريد القائمون بالمقابلة رؤية فهم لنظام الأنواع، والعوامل العامة (Generics)، والقدرة على تصميم بنية آمنة.

في هذه المقالة، سنحلل الأسئلة الأكثر شيوعًا في مقابلات TypeScript التي تُطرح فعليًا في الشركات الرائدة. ستحصل ليس فقط على النظرية، ولكن أيضًا على أمثلة كود TypeScript التي يمكنك استخدامها فورًا في مشاريعك الشخصية. هيا بنا!

1. الأساسيات: الأنواع، الواجهات (Interfaces) والفرق بينهما

الجزء الأول من الأسئلة أساسي. يريد القائم بالمقابلة التأكد من أنك لا تخلط بين type و interface.

متى تستخدم type ومتى تستخدم interface؟

سؤال كلاسيكي. تذكر قاعدة بسيطة:

\n
• Interface - للكائنات التي يمكن توسيعها (declaration merging). استخدمها لـ API و DTO وخصائص المكونات.
\n
• Type - للاتحادات (union) والتقاطعات والأنواع البدائية (primitives) والمجموعات (tuples).
\n

مثال من مقابلة حقيقية:

// Interface — قابل للتوسيع\ninterface User {\n    id: number;\n    name: string;\n}\n\ninterface AdminUser extends User {\n    role: 'admin';\n}\n\n// Type — اتحاد\ntype Status = 'active' | 'inactive' | 'banned';\ntype ApiResponse<T> = {\n    data: T;\n    error?: string;\n};

مهم: لا تقل أبدًا "interface أفضل لأنه أسرع". الفرق في الأداء ضئيل جدًا. الأهم هو الدلالات (semantics).

2. العوامل العامة (Generics): كيف لا تخفق في المقابلة

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

كتابة دالة عامة (Generic Function)

function getFirst<T>(arr: T[]): T | undefined {\n    return arr[0];\n}\n\nconst num = getFirst([1, 2, 3]); // number\nconst str = getFirst(['a', 'b']); // string

الآن لنجعلها أكثر تعقيدًا - نقيد العامل العام باستخدام extends:

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {\n    return obj[key];\n}\n\nconst user = { name: 'Alice', age: 30 };\ngetProperty(user, 'name'); // OK: string\ngetProperty(user, 'email'); // Error: 'email' ليس ضمن keyof

هذا النمط موجود في كل مشروع ثانٍ يستخدم React + TypeScript. تأكد من التدرب على كتابة العوامل العامة لـ TypeScript في مشاريعك.

3. أنواع الأدوات المساعدة (Utility Types): ترسانتك السرية

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

أفضل 5 أنواع أدوات مساعدة يجب معرفتها

\n
• Partial<T> - جميع الحقول تصبح اختيارية؛
\n
• Required<T> - جميع الحقول إلزامية؛
\n
• Pick<T, K> - نختار فقط المفاتيح المحددة؛
\n
• Omit<T, K> - نستبعد المفاتيح المحددة؛
\n
• Record<K, V> - ينشئ نوع كائن بمفاتيح K وقيم V.
\n

مثال يحبون طرحه في المقابلات:

interface Todo {\n    title: string;\n    description: string;\n    completed: boolean;\n    createdAt: Date;\n}\n\n// تحديث جزء فقط من Todo\nfunction updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {\n    return { ...todo, ...fieldsToUpdate };\n}\n\n// إنشاء قاموس\nconst