المزخرفات في TypeScript

تشرح هذه المقالة المزخرفات في TypeScript۔

YouTube Video

المزخرفات في TypeScript

المزخرفات في TypeScript هي آلية لإضافة وظيفة إضافية أو سلوك إلى الفئات، والأساليب، والمُدخلات، والخصائص، أو المعاملات۔ المزخرفات هي أداة قوية لتعزيز سهولة قراءة الكود وإعادة استخدامه۔

أساسيات المزخرفات

المزخرف هو دالة تضيف وظائف إضافية إلى الفئة أو إلى أعضاء الفئة۔ تم تقديم المزخرفات في TypeScript 1.5 وتم اقتراحها لتضمينها في معيار ECMAScript أيضًا۔

1{
2  "compilerOptions": {
3    "experimentalDecorators": true
4  }
5}

• لاستخدام المزخرفات، تحتاج إلى تفعيل خيار experimentalDecorators في ملف tsconfig.json۔

أنواع المزخرفات

في TypeScript، يمكنك استخدام الأنواع الخمسة التالية من المزخرفات۔

• مُزَيِّن الفئة مُزَيِّن يُطَبَّق على فئة۔
• مُزَيِّن الطريقة مُزَيِّن يُطَبَّق على طريقة في فئة۔
• مُزَيِّن المُوصِل مُزَيِّن يُطَبَّق على المُستلِم أو المُحدِّد لخاصية في فئة۔
• مُزَيِّن الخاصية مُزَيِّن يُطَبَّق على خاصية في فئة۔
• مُزَيِّن المُعَامِل مُزَيِّن يُطَبَّق على مُعَامِل لطريقة۔

مزخرف الفئة

مزخرفات الفئة هي المزخرفات التي تُطبق على الفئات۔ تُكتب مزخرفات الفئة مباشرة فوق تعريف الفئة ويمكنها الوصول إلى مُنشئ الفئة۔ تُستخدم هذه المزخرفات أساسًا لتغيير سلوك الفئة أو إضافة بيانات وصفية۔

 1function Logger(constructor: Function) {
 2    console.log(`Class ${constructor.name} is being constructed`);
 3}
 4
 5@Logger
 6class Person {
 7    constructor(public name: string) {}
 8}
 9
10const person = new Person('John');
11// Output: Class Person is being constructed

في هذا المثال، يتم تطبيق المزخرف Logger على الفئة، ويتم عرض رسالة في وحدة التحكم عند تهيئة الفئة۔

مزخرف الطريقة

يتم تطبيق مزخرفات الطريقة على الطرق داخل الفئة ويمكنها تعديل استدعاءات الطرق وسلوكها۔ مُزَيِّن الطريقة يأخذ ثلاثة معطيات۔

1. النموذج الأولي للفئة
2. اسم الطريقة
3. واصف الخاصية للطريقة

 1function LogExecutionTime(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 2    const originalMethod = descriptor.value;
 3
 4    descriptor.value = function (...args: any[]) {
 5        console.time(propertyKey);
 6        const result = originalMethod.apply(this, args);
 7        console.timeEnd(propertyKey);
 8        return result;
 9    };
10}
11
12class MathOperations {
13  @LogExecutionTime
14  add(a: number, b: number): number {
15    return a + b;
16  }
17}
18
19const math = new MathOperations();
20math.add(2, 3);
21// Output: add: 0.000ms (execution time is displayed)

في هذا المثال، يتم تطبيق المزخرف LogExecutionTime على الطريقة، ويتم تسجيل وقت تنفيذ الطريقة۔

مزين الوصول

يتم تطبيق مزينات الوصول على getter أو setter لخصائص الفئة۔ تكون مفيدة لإضافة سلوك عند تغيير قيم الخصائص۔

 1function LogAccess(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 2    const originalGet = descriptor.get;
 3    const originalSet = descriptor.set;
 4
 5    if (originalGet) {
 6        descriptor.get = function () {
 7            console.log(`Getter called for ${propertyKey}`);
 8            return originalGet.call(this);
 9        };
10    }
11
12    if (originalSet) {
13        descriptor.set = function (value: any) {
14            console.log(`Setter called for ${propertyKey} with value: ${value}`);
15            originalSet.call(this, value);
16        };
17    }
18}
19
20class Car {
21    private _speed: number = 0;
22
23    @LogAccess
24    get speed() {
25        return this._speed;
26    }
27
28    set speed(value: number) {
29        this._speed = value;
30    }
31}
32
33const car = new Car();
34car.speed = 120;               // Setter called for speed with value: 120
35console.log(car.speed);       // Getter called for speed → 120

في هذا المثال، يتم استخدام محدد الوصول لتسجيل الإخراج عندما يتم استدعاء كل من getter وsetter۔

مزين الخاصية

يتم تطبيق مزينات الخصائص على خصائص الفئة ولكنها لا يمكن أن تغير قيمة الخاصية أو سلوكها مباشرة۔ تُستخدم للحصول على بيانات وصفية للخصائص۔

 1function Readonly(target: any, propertyKey: string) {
 2    Object.defineProperty(target, propertyKey, {
 3        writable: false
 4    });
 5}
 6
 7class Book {
 8    @Readonly
 9    title: string = "TypeScript Guide";
10}
11
12const book = new Book();
13book.title = "New Title"; // Error: Cannot assign to read only property 'title'

في هذا المثال، يتم تطبيق المزخرف Readonly على خاصية title، ويتم جعل الخاصية للقراءة فقط۔

مزين المعامل

يتم تطبيق مزينات المعاملات على معاملات الطريقة۔ عادةً ما تُستخدم لتخزين البيانات الوصفية أو للتحقق من صحة المعاملات۔ تأخذ المزخرفات ثلاثة معاملات۔

1. النموذج الأولي للفئة
2. اسم الطريقة
3. مؤشر المعامل

 1function LogParameter(target: any, propertyKey: string, parameterIndex: number) {
 2    console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} was decorated.`);
 3}
 4
 5class User {
 6    greet(@LogParameter message: string) {
 7        console.log(message);
 8    }
 9}
10
11const user = new User();
12user.greet('Hello!');
13// Output: Parameter at index 0 in method greet was decorated.

في هذا المثال، يتم تطبيق المزخرف LogParameter على المعامل الأول للطريقة greet، وعند استدعاء الطريقة، يتم تسجيل أن المعامل مزين۔

أمثلة عملية على المزخرفات

تُستخدم المزخرفات على نطاق واسع في الأطر مثل Angular، وخاصةً لحقن التبعيات وتعريف البيانات الوصفية۔ على سبيل المثال، استخدم المزخرف @Component لتعريف مكونات Angular كما هو موضح أدناه۔

1@Component({
2    selector: 'app-root',
3    template: '<h1>Hello World</h1>',
4})
5export class AppComponent {}

لذلك، تُستخدم المزخرفات غالباً كأجزاء أساسية من الأطر والمكتبات، مما يساعد على إبقاء الشيفرة مختصرة وواضحة۔

ملخص المزخرفات

إن مزخرفات TypeScript عبارة عن أدوات قوية تضيف بمرونة وظائف للفئات والطرق والخصائص۔ استخدام المزخرفات المخصصة يحسن من قابلية صيانة الشيفرة وإعادة استخدامها، مما يتيح مزيدًا من التجريد۔ تلعب الزخارف دورًا مهمًا في الأطر مثل Angular وNestJS، وفهمها يساعد في الفهم العميق لكيفية عمل هذه الأطر۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video