استخدام Type Aliases والفرق بينها وبين الواجهات

Type Aliases في تايبسكربتTypeScript Type Aliasesالفرق بين Type و Interfaceتعريف الأنواع المخصصةAngular TypeScript

جدول مرجعي سريع

وجه المقارنة	Type Aliases (type)	الواجهات (interface)
طريقة التوسيع (Extension)	تتم من خلال تقاطع الأنواع باستخدام الرمز &	تتم من خلال التوريث المباشر باستخدام كلمة extends
إعادة الدمج (Declaration Merging)	غير مسموحة ولا يمكن تكرار نفس الاسم	مسموحة وتدمج الخصائص تلقائياً عند تكرار الاسم
الأنواع المدعومة	تدعم تعريف الأقواس، الأنواع الاتحادية (Unions)، والبدائية	مخصصة بالأساس لتحديد هيكل الكائنات (Objects)

الشرح

نحتاج غالباً إلى تعريف أنواع بيانات مخصصة ومعقدة لتنظيم شكل البيانات. بالإضافة إلى الواجهات (Interfaces) التي تعرفنا عليها سابقاً، توفر لنا لغة TypeScript أداة قوية جداً تُسمى أسماء الأنواع المستعارة (Type Aliases). تتيح لك هذه الأداة إعطاء اسم جديد لأي نوع بيانات (سواء كان نوعاً أساسياً، أو اتحادياً، أو كائناً مركباً)، وفهم الفرق الدقيق بينها وبين Interface يمثل مهارة أساسية للمطور المحترف.

تفصيل استخدام Type Aliases والفرق الجوهري

ما هو Type Alias؟

هو ببساطة اسم مستعار لنوع بيانات معين تستخدم الكلمة المفتاحية type لتعريفه. يمكن أن يكون هذا النوع نصاً، أو رقماً، أو دمجاً لعدة أنواع معا (Union Types)، أو هيكل كائن مشابه للواجهات.

متى تستخدم Type ومتى تستخدم Interface؟

استخدم interface دائماً عندما تقوم بتعريف هيكل كائن (Object Structure) ترغب في إمكانية توسعه أو تعديله لاحقاً عبر الدمج. استخدم type عندما تحتاج إلى أنواع اتحادية (string | number)، أو أنواع أولية، أو ربط معقد لا تدعمه الواجهات بشكل مباشر.

أمثلة برمجية: تطبيق عملي على Type Aliases في Angular

المثال الأول: إنشاء Type لبيانات تقبل أكثر من نوع (Union Types)

في تطبيقات Angular، غالباً ما يأتي معرف العنصر أو حالة التحميل بأكثر من شكل:

typescript

1	// تعريف نوع مخصص يقبل النص أو الرقم لمعرف المنتج
2	type ProductIdentifier = string \| number;
3
4	let id1: ProductIdentifier = "PROD-100";
5	let id2: ProductIdentifier = 504;
6
7	// تعريف أنواع اتحادية لحالات الطلب
8	type OrderStatus = 'pending' \| 'shipped' \| 'delivered';
9	let currentStatus: OrderStatus = 'pending';

المثال الثاني: دمج الأنواع باستخدام تقاطع الأنواع (Intersection)

بدلاً من التوريث (extends) في الواجهات، نقوم بدمج الـ Types باستخدام الرمز &:

typescript

1	type Person = {
2	name: string;
3	email: string;
4	};
5
6	type EmployeeData = {
7	employeeId: number;
8	department: string;
9	};
10
11	// دمج النوعين معاً لتكوين نوع جديد متكامل
12	type StaffMember = Person & EmployeeData;
13
14	let staff: StaffMember = {
15	name: 'خالد عبد الله',
16	email: 'khaled@example.com',
17	employeeId: 402,
18	department: 'تطوير الواجهات'
19	};

نصائح احترافية

—اختر المعيار الموحد لمشروع Angular الخاص بك!
—على الرغم من التقارب الشديد في الأداء بين interface و type عند تعريف الكائنات، يفضل معظم مطوري Angular استخدام interface لهياكل المكونات وخدمات الـ APIs، واستخدام type للأنواع الاتحادية (Unions) والمتغيرات المعقدة. حافظ على اتساق المعيار طوال بناء الـ 19 فصلًا لضمان نظافة واحترافية الكود.

الدرس السابق

نواع البيانات الأساسية

الدرس التالي

تحديد أنواع المدخلات والمخرجات

وجه المقارنة

Type Aliases (type)

الواجهات (interface)

طريقة التوسيع (Extension)

تتم من خلال تقاطع الأنواع باستخدام الرمز &

تتم من خلال التوريث المباشر باستخدام كلمة extends

إعادة الدمج (Declaration Merging)

غير مسموحة ولا يمكن تكرار نفس الاسم

مسموحة وتدمج الخصائص تلقائياً عند تكرار الاسم

الأنواع المدعومة

تدعم تعريف الأقواس، الأنواع الاتحادية (Unions)، والبدائية

مخصصة بالأساس لتحديد هيكل الكائنات (Objects)

تفصيل استخدام Type Aliases والفرق الجوهري

ما هو Type Alias؟

متى تستخدم Type ومتى تستخدم Interface؟

أمثلة برمجية: تطبيق عملي على Type Aliases في Angular

المثال الأول: إنشاء Type لبيانات تقبل أكثر من نوع (Union Types)

في تطبيقات Angular، غالباً ما يأتي معرف العنصر أو حالة التحميل بأكثر من شكل:

typescript

1	// تعريف نوع مخصص يقبل النص أو الرقم لمعرف المنتج
2	type ProductIdentifier = string \| number;
3
4	let id1: ProductIdentifier = "PROD-100";
5	let id2: ProductIdentifier = 504;
6
7	// تعريف أنواع اتحادية لحالات الطلب
8	type OrderStatus = 'pending' \| 'shipped' \| 'delivered';
9	let currentStatus: OrderStatus = 'pending';

المثال الثاني: دمج الأنواع باستخدام تقاطع الأنواع (Intersection)

بدلاً من التوريث (extends) في الواجهات، نقوم بدمج الـ Types باستخدام الرمز &:

typescript

1	type Person = {
2	name: string;
3	email: string;
4	};
5
6	type EmployeeData = {
7	employeeId: number;
8	department: string;
9	};
10
11	// دمج النوعين معاً لتكوين نوع جديد متكامل
12	type StaffMember = Person & EmployeeData;
13
14	let staff: StaffMember = {
15	name: 'خالد عبد الله',
16	email: 'khaled@example.com',
17	employeeId: 402,
18	department: 'تطوير الواجهات'
19	};