مقدمة إلى المزخرفات واهميتها

المزخرفات في تايبسكربتTypeScript Decoratorsدور المزخرفات في Angularالوظائف الإضافيةبرمجة الأقواس

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

نوع المزخرف	مكانه المخصص	وظيفته الأساسية في التطبيق
Class Decorators	فوق تعريف الفئة مباشرة (Class)	تحديد خصائص عامة للفئة مثل ربطها بقالب HTML وتصاميم (مثل @Component)
Property Decorators	فوق الخصائص والمتغيرات داخل الفئة	مراقبة أو تعديل سلوك متغير معين أو مشاركة بيانات (مثل @Input)
Method Decorators	فوق الدوال داخل الفئة	تنفيذ وظائف إضافية قبل أو بعد تشغيل الدالة الأصلية
Parameter Decorators	بجانب معاملات الدوال (Parameters)	تحديد بيانات إضافية لحقن التبعيات (Dependency Injection)

الشرح

عند الانتقال للعمل بعمق داخل إطار عمل Angular 22.1، ستلاحظ أننا نستخدم بكثافة كلمات تبدأ بعلامة الـ (@) مثل @Component أو @Injectable. هذه الكلمات تُعرف في لغة TypeScript باسم المزخرفات (Decorators). في هذا الدرس، سنتعرف على مفهوم المزخرفات، وكيف تمثل أداة متقدمة لتعديل شكل وسلوك الفئات (Classes) والخصائص دون تغيير الكود الأساسي الخاص بها.

ما هي المزخرفات (Decorators) وكيف تعمل؟

المزخرف ببساطة هو عبارة عن دالة خاصة (Function) يتم استدعاؤها وإضافتها إلى الفئات، أو الدوال، أو المتغيرات، أو المدخلات باستخدام الرمز الإشاري (@). في لغة TypeScript، تُعتبر المزخرفات ميزة متقدمة تمكن المطورين من إضافة "خصائص وصفية وميتاداتا" (Metadata) للعناصر البرمجية.

ℹ️ معلومة

في بيئة عمل Angular 22.1، تعتمد الهندسة بالكامل على المزخرفات لكي تفهم الأداة كيفية التعامل مع الملفات:

تحديد الهوية:

من خلال @Component، نخبر Angular أن هذا الكلاس العادي عبارة عن مكون مرئي له واجهة مستخدم.

حقن التبعيات:

من خلال @Injectable، نخبر الأداة أن هذا الكلاس عبارة عن خدمة (Service) يمكن مشاركتها وتوفيرها في أماكن مختلفة من التطبيق.

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

لفهم كيفية كتابة واستخدام المزخرفات في مشروعك، إليك أمثلة عملية توضح شكلها البرمجي:

المثال الأول: مزخرف الفئة (Class Decorator) في مكون Angular

هنا نستخدم المزخرف @Component لتحديد بيانات المكون مثل اسمه وملفات العرض والتصميم الخاصة به:

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-user-profile',
5	standalone: true,
6	template: `<h1>مرحباً بك في صفحة المستخدم</h1>`,
7	styleUrls: ['./user-profile.component.css']
8	})
9	export class UserProfileComponent {
10	// منطق المكون البرمجي هنا
11	}

المثال الثاني: مبدأ عمل مزخرف مخصص (Custom Decorator)

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

typescript

1	function Logger(constructor: Function) {
2	console.log("تم إنشاء الفئة بنجاح بواسطة المزخرف:", constructor.name);
3	}
4
5	@Logger
6	class Car {
7	constructor(public brand: string) {}
8	}
9
10	// عند إنشاء كائن جديد، سيعمل المزخرف تلقائياً في الخلفية
11	const myCar = new Car("تويوتا");

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

—تعامل مع المزخرفات كإعدادات جاهزة ولا تحاول اختراعها مبكراً!
—كمطور يعمل بـ Angular 22.1، لن تحتاج غالباً لكتابة مزخرفات مخصصة (Custom Decorators) بنفسك في بداية طريقك، فإطار العمل يوفر لك مزخرفات جاهزة ومصممة باحترافية عالية لكل احتياجاتك. تركيزك يجب أن ينصب على فهم كيف تستخدم المزخرفات الجاهزة بالشكل الصحيح لتوجيه المكونات والخدمات والمدخلات.

الدرس السابق

ما هي لغة TypeScript

الدرس التالي

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

نوع المزخرف

مكانه المخصص

وظيفته الأساسية في التطبيق

Class Decorators

فوق تعريف الفئة مباشرة (Class)

تحديد خصائص عامة للفئة مثل ربطها بقالب HTML وتصاميم (مثل @Component)

Property Decorators

فوق الخصائص والمتغيرات داخل الفئة

مراقبة أو تعديل سلوك متغير معين أو مشاركة بيانات (مثل @Input)

Method Decorators

فوق الدوال داخل الفئة

تنفيذ وظائف إضافية قبل أو بعد تشغيل الدالة الأصلية

Parameter Decorators

بجانب معاملات الدوال (Parameters)

تحديد بيانات إضافية لحقن التبعيات (Dependency Injection)

ما هي المزخرفات (Decorators) وكيف تعمل؟

ℹ️ معلومة

في بيئة عمل Angular 22.1، تعتمد الهندسة بالكامل على المزخرفات لكي تفهم الأداة كيفية التعامل مع الملفات:

تحديد الهوية:

من خلال @Component، نخبر Angular أن هذا الكلاس العادي عبارة عن مكون مرئي له واجهة مستخدم.

حقن التبعيات:

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

لفهم كيفية كتابة واستخدام المزخرفات في مشروعك، إليك أمثلة عملية توضح شكلها البرمجي:

المثال الأول: مزخرف الفئة (Class Decorator) في مكون Angular

هنا نستخدم المزخرف @Component لتحديد بيانات المكون مثل اسمه وملفات العرض والتصميم الخاصة به:

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-user-profile',
5	standalone: true,
6	template: `<h1>مرحباً بك في صفحة المستخدم</h1>`,
7	styleUrls: ['./user-profile.component.css']
8	})
9	export class UserProfileComponent {
10	// منطق المكون البرمجي هنا
11	}

المثال الثاني: مبدأ عمل مزخرف مخصص (Custom Decorator)

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

typescript

1	function Logger(constructor: Function) {
2	console.log("تم إنشاء الفئة بنجاح بواسطة المزخرف:", constructor.name);
3	}
4
5	@Logger
6	class Car {
7	constructor(public brand: string) {}
8	}
9
10	// عند إنشاء كائن جديد، سيعمل المزخرف تلقائياً في الخلفية
11	const myCar = new Car("تويوتا");