كيفية استخدام الديكورات في TypeScript

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

ما هي الديكورات؟

الديكورات هي وظائف خاصة يمكن تطبيقها على الفئات أو الطرق أو الخصائص أو المعلمات. يتم استدعاؤها في وقت التشغيل وتسمح للمطورين بإضافة تعليقات توضيحية وتعديل التعليمات البرمجية بطريقة إعلانية. لتمكين الديكورات في مشروع TypeScript، يجب تعيين العلم experimentalDecorators على true في الملف tsconfig.json.

تمكين الديكورات في TypeScript

لاستخدام الديكورات، يجب تكوين مُجمِّع TypeScript للتعرف عليها. يمكن القيام بذلك عن طريق تعيين العلم experimentalDecorators إلى true في الملف tsconfig.json.

{
  "compilerOptions": {
    "target": "ES6",
    "experimentalDecorators": true
  }
}

بمجرد تمكين الديكورات، يمكن استخدامها في جميع أنحاء المشروع.

إنشاء مُزيِّن للفئة

يتم تطبيق مُزين الفئة على إعلان الفئة ويمكن استخدامه لتعديل تعريف الفئة أو استبداله. يتم إعلان مُزينات الفئة أعلى الفئة التي تزينها مباشرةً، باستخدام الرمز @.

function LogClass(target: Function) {
  console.log(`Class ${target.name} is created.`);
}

@LogClass
class Person {
  constructor(public name: string) {}
}

const person = new Person('Alice');

في هذا المثال، يقوم مُزيِّن LogClass بتسجيل رسالة عند إنشاء فئة Person. يتم تعريف المُزيِّن كدالة تأخذ وسيطة واحدة: مُنشئ الفئة التي يتم تزيينها.

ديكورات الطرق

يتم تطبيق ديكورات الطريقة على الطرق داخل الفئة. وهي تسمح للمطورين باعتراض استدعاءات الطريقة، أو تعديل سلوكها، أو تنفيذ عمليات إضافية قبل أو بعد تنفيذ الطريقة.

function LogMethod(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyKey} is called with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

class Calculator {
  @LogMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3);

هنا، يقوم مُزيِّن LogMethod بتسجيل اسم الطريقة وحججها كلما تم استدعاء طريقة add. ويقوم بتغليف الطريقة الأصلية في دالة جديدة تقوم بالتسجيل قبل تفويضها إلى الطريقة الأصلية.

ديكورات العقارات

تُستخدم مُزيِّنات الخصائص لمراقبة سلوك خصائص الفئة أو تعديله. وعلى عكس مُزيِّنات الطريقة، لا تتمتع هذه المُزيِّنات بالقدرة على الوصول إلى قيمة الخاصية نفسها، ولكنها تستطيع إضافة بيانات وصفية إلى الخصائص.

function ReadOnly(target: Object, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Book {
  @ReadOnly
  title: string = 'TypeScript Guide';
}

const myBook = new Book();
myBook.title = 'New Title'; // This will cause an error in strict mode

في هذا المثال، يتم تطبيق الديكور ReadOnly على الخاصية title لفئة Book، مما يجعلها للقراءة فقط عن طريق تعيين writable إلى false.

مُزيّنات المعلمات

تُستخدم مُزيِّنات المعلمات لشرح معلمات الطريقة أو تعديلها. وتتلقى ثلاثة وسيطات: الكائن المستهدف، واسم الطريقة، ومؤشر المعلمات.

function LogParameter(target: Object, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter in position ${parameterIndex} at ${propertyKey} method is decorated.`);
}

class UserService {
  greet(@LogParameter message: string): void {
    console.log(message);
  }
}

const userService = new UserService();
userService.greet('Hello, TypeScript!');

في هذا المثال، يتم تطبيق مُزيِّن LogParameter على معلمة message لطريقة greet في فئة UserService. يسجل المُزيِّن معلومات حول المعلمة التي يتم تزيينها.

خاتمة

توفر أدوات التزيين في TypeScript طريقة فعّالة لتعزيز وظائف الكود دون تغيير بنيته. من خلال الاستفادة من أدوات التزيين للفئات والطرق والخصائص والمعلمات، يمكن للمطورين إضافة وظائف قابلة لإعادة الاستخدام بسهولة عبر مشاريعهم. باستخدام الأمثلة المقدمة في هذا الدليل، من السهل البدء في استخدام أدوات التزيين في TypeScript.