كيفية إنشاء ديكورات TypeScript مخصصة

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

أنواع الديكورات في TypeScript

هناك أربعة أنواع رئيسية من الديكورات في TypeScript:

• مُزينات الفصول الدراسية
• ديكورات الطرق
• ديكورات الملحقات
• ديكورات العقارات

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

لاستخدام الديكورات في مشروع TypeScript، يجب تمكين الخيار experimentalDecorators في الملف tsconfig.json.

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

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

يتم تطبيق مُزيِّنات الفئة على مُنشئ الفئة. وهي مفيدة لإضافة بيانات وصفية أو وظائف إلى الفئة. فيما يلي مثال لكيفية إنشاء مُزيِّن فئة بسيط.

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

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

const person = new Person("John");
// Output: Class Person is created

إنشاء مُزيِّن الطريقة

يتم تطبيق ديكورات الطريقة على طرق الفئة. ويمكن استخدامها لتعديل أو مراقبة سلوك الطريقة. فيما يلي مثال لديكور طريقة يسجل تنفيذ الطريقة.

function logMethod(target: any, 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) {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3); 
// Output: Method add is called with arguments: [2, 3]

إنشاء ديكور عقاري

يمكن استخدام مُزيِّنات الخصائص لمراقبة الخصائص أو تعديلها. فيما يلي مثال حيث يضمن مُزيِّن الخصائص أن الخاصية لها قيمة افتراضية.

function defaultValue(value: any) {
  return function (target: any, propertyKey: string) {
    let propertyValue = value;

    const getter = function () {
      return propertyValue;
    };

    const setter = function (newValue: any) {
      propertyValue = newValue || value;
    };

    Object.defineProperty(target, propertyKey, {
      get: getter,
      set: setter,
      enumerable: true,
      configurable: true,
    });
  };
}

class User {
  @defaultValue('Anonymous')
  name!: string;
}

const user = new User();
console.log(user.name); // Output: Anonymous
user.name = 'Alice';
console.log(user.name); // Output: Alice

إنشاء مُزيِّن المعلمات

يتم تطبيق مُزيِّنات المعلمات على معلمات الطريقة. ويمكن أن تكون مفيدة لمهام مثل التحقق من صحة الوسائط أو تسجيلها. فيما يلي مثال لمُزيِّن المعلمات.

function logParameter(target: any, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} is being decorated`);
}

class Vehicle {
  drive(@logParameter speed: number) {
    console.log(`Driving at speed ${speed}`);
  }
}

const vehicle = new Vehicle();
vehicle.drive(50);
// Output: Parameter at index 0 in method drive is being decorated

خاتمة

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