إنشاء أنواع بيانات مخصصة باستخدام الواجهات

الواجهات في تايبسكربتTypeScript Interfacesالنماذج الكائنيةتعريف هيكل البيانات في Angularالعقود البرمجية

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

نوع الخاصية في الواجهة	طريقة الكتابة والتعريف	الاستخدام الأساسي والوصف
Required Property (خاصية أساسية)	name: string;	خاصية إجبارية يجب توفرها في أي كائن ينفذ هذه الواجهة دون استثناء
Optional Property (خاصية اختيارية)	age?: number;	خاصية غير إجبارية يتم وضع علامة الاستفهام بجانبها لتجنب الأخطاء عند غيابها
Readonly Property (خاصية للقراءة فقط)	readonly id: number;	خاصية ثابتة يمكن قراءتها لمرة واحدة عند الإنشاء ولا يمكن تعديل قيمتها لاحقاً

الشرح

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

تفصيل التعامل مع الواجهات (Interfaces) في TypeScript

العقود الهيكلية (Structural Contracts):

الواجهات في TypeScript لا يتم ترجمتها إلى أكواد في لغة JavaScript النهائية؛ وظيفتها الأساسية هي المساعدة أثناء مرحلة التطوير (Compile-time) لفرض هيكل موحد للكائنات، مما يمنع الأخطاء الناتجة عن نسيان خصائص مهمة.

الخصائص الاختيارية والقراءة فقط:

تتيح لك الواجهات مرونة عالية من خلال تحديد خصائص قد تكون موجودة أو غير موجودة (?)، أو خصائص حماية لا يمكن تغيير قيمتها بعد التهيئة (readonly).

أمثلة برمجية: تطبيق عملي على الواجهات في Angular

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

هنا نقوم بإنشاء Interface لتمثيل مستخدم التطبيق وكيفية تطبيقها على بيانات حقيقية:

typescript

1	// تعريف هيكل بيانات المستخدم
2	interface UserProfile {
3	readonly id: number;
4	name: string;
5	email: string;
6	age?: number; // خاصية اختيارية
7	}
8
9	// استخدام الواجهة لتحديد نوع البيانات الكائنية
10	let currentUser: UserProfile = {
11	id: 1,
12	name: 'سارة أحمد',
13	email: 'sara@example.com'
14	};
15
16	// خطأ: لا يمكنك تعديل خاصية تحمل readonly
17	// currentUser.id = 2;

المثال الثاني: دمج الواجهات (Interface Inheritance/Extension)

يمكنك توسيع واجهة موجودة لتوريث خصائصها إلى واجهة جديدة، وهو نمط شائع جداً في مشاريع Angular لتجنب تكرار الكود:

typescript

1	interface BaseEntity {
2	createdAt: Date;
3	}
4
5	// توريث الواجهة السابقة لإضافة خصائص جديدة
6	interface Product extends BaseEntity {
7	productId: string;
8	title: string;
9	price: number;
10	}
11
12	let item: Product = {
13	productId: 'P-900',
14	title: 'شاشة ذكية',
15	price: 4500,
16	createdAt: new Date()
17	};

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

—استخدم Interfaces لتمثيل نماذج البيانات القادمة من الـ APIs!
—عند جلب البيانات من الخادم (Backend) عبر خدمات Angular، قم دائمًا بربط استجابة الـ Observable بواجهة مخصصة (Observable<UserProfile[]>). هذا يمنحك تكملة تلقائية (IntelliSense) في محرر الكواد ويحميك من مفاجآت تغير أسماء الخصائص القادمة من السيرفر.

الدرس السابق

التعامل مع المصفوفات

الدرس التالي

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

نوع الخاصية في الواجهة

طريقة الكتابة والتعريف

الاستخدام الأساسي والوصف

Required Property (خاصية أساسية)

name: string;

خاصية إجبارية يجب توفرها في أي كائن ينفذ هذه الواجهة دون استثناء

Optional Property (خاصية اختيارية)

age?: number;

خاصية غير إجبارية يتم وضع علامة الاستفهام بجانبها لتجنب الأخطاء عند غيابها

Readonly Property (خاصية للقراءة فقط)

readonly id: number;

خاصية ثابتة يمكن قراءتها لمرة واحدة عند الإنشاء ولا يمكن تعديل قيمتها لاحقاً

تفصيل التعامل مع الواجهات (Interfaces) في TypeScript

العقود الهيكلية (Structural Contracts):

الخصائص الاختيارية والقراءة فقط:

أمثلة برمجية: تطبيق عملي على الواجهات في Angular

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

هنا نقوم بإنشاء Interface لتمثيل مستخدم التطبيق وكيفية تطبيقها على بيانات حقيقية:

typescript

1	// تعريف هيكل بيانات المستخدم
2	interface UserProfile {
3	readonly id: number;
4	name: string;
5	email: string;
6	age?: number; // خاصية اختيارية
7	}
8
9	// استخدام الواجهة لتحديد نوع البيانات الكائنية
10	let currentUser: UserProfile = {
11	id: 1,
12	name: 'سارة أحمد',
13	email: 'sara@example.com'
14	};
15
16	// خطأ: لا يمكنك تعديل خاصية تحمل readonly
17	// currentUser.id = 2;

المثال الثاني: دمج الواجهات (Interface Inheritance/Extension)

يمكنك توسيع واجهة موجودة لتوريث خصائصها إلى واجهة جديدة، وهو نمط شائع جداً في مشاريع Angular لتجنب تكرار الكود:

typescript

1	interface BaseEntity {
2	createdAt: Date;
3	}
4
5	// توريث الواجهة السابقة لإضافة خصائص جديدة
6	interface Product extends BaseEntity {
7	productId: string;
8	title: string;
9	price: number;
10	}
11
12	let item: Product = {
13	productId: 'P-900',
14	title: 'شاشة ذكية',
15	price: 4500,
16	createdAt: new Date()
17	};