مقدمة إلى Decorators

إن Decorators في TypeScript هي دوال خاصة تتيح لك إضافة بيانات وصفية أو تعديل سلوك الأصناف والدوال والخصائص.

تُستخدم غالبًا في أطر عمل مثل Angular لتبسيط عملية التطوير.

كيف تعمل Decorators

الـ decorator هو دالة تُطبَّق على صنف أو أحد أعضائه (مثل الدوال والخصائص وغيرهما).

على سبيل المثال، تُعد @Component في Angular decorator يضيف بيانات وصفية إلى صنف لتعريفه بوصفه مكوّنًا.

استخدام Decorators المضمنة

يحتوي TypeScript على Decorators مضمنة، مثل:

• @readonly: تجعل الخاصية للقراءة فقط.
• @enumerable: تتحكم في إمكانية تعداد الخاصية.

تساعد هذه الـ Decorators على تعديل سلوك الخصائص أو الدوال مباشرةً.

إنشاء decorator بسيط

يمكنك إنشاء decorator خاص بك لتسجيل الرسائل أو إضافة وظائف:

طبّقه على خاصية: @Log.

function Log(target: any, propertyName: string) {
  console.log(`Property ${propertyName} was accessed`);
}

Decorators الخاصة بالأصناف

تُستخدم Decorators الخاصة بالأصناف لتعديل سلوك صنف كامل أو تحسينه:

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

طبّقه على صنف: @SimpleDecorator.

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Decorators الخاصة بالدوال

تعدّل Decorators الخاصة بالدوال سلوك إحدى دوال الصنف:

استخدمها مع دالة: @LogMethod.

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(`Method ${propertyKey} was called`);
}

استخدام Decorators في Angular

يعتمد Angular بشكل كبير على Decorators لإضافة بيانات وصفية إلى مكوّناته:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

يعرّف decorator @Component الصنف بوصفه مكوّنًا في Angular.

أفضل الممارسات لاستخدام Decorators

عند استخدام Decorators:

• احرص على أن تكون بسيطة ومركزة.
• استخدمها للبيانات الوصفية، وليس للمنطق المعقد.
• استفد من Decorators المضمنة كلما أمكن لتوفير الوقت.

تهانينا!

لقد تعلمت كيف تعمل Decorators في TypeScript وكيف يمكن استخدامها لتعديل تعليماتك البرمجية أو تحسينها. واصل تجربة Decorators لإتقان استخدامها في مشاريعك!