فهم ديكورات TypeScript

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

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

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

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

• مُزينات الفئة: يتم تطبيقها على الفئة بأكملها.
• مُزينات الطريقة: يتم تطبيقها على طريقة داخل فئة.
• مُزينات الخصائص: يتم تطبيقها على خاصية في فئة.
• مُزيّنات المعلمات: يتم تطبيقها على معلمات الطريقة في الفئة.

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

قبل أن تتمكن من استخدام الديكورات، تأكد من تمكينها في ملف tsconfig.json عن طريق تعيين "experimentalDecorators" إلى true.

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

مُزينات الفصول الدراسية

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

function Controller(route: string) {
  return function (target: Function) {
    target.prototype.route = route;
  };
}

@Controller('/api/user')
class UserController {
  // Class logic
}

console.log(new UserController().route); // Outputs: '/api/user'

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

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

function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyName} with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
}

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

const calculator = new Calculator();
calculator.add(2, 3); // Logs: 'Calling add with arguments: 2,3'

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

تُستخدم مُزيِّنات الخصائص لإضافة وظائف إلى الخصائص في فئة ما. ويمكن أن تكون مفيدة للتحقق من صحة الخصائص أو لإضافة بيانات وصفية إلى خاصية ما.

function ReadOnly(target: any, key: string) {
  const descriptor: PropertyDescriptor = {
    writable: false
  };
  return descriptor;
}

class Person {
  @ReadOnly
  name: string = 'John Doe';
}

const person = new Person();
person.name = 'Jane Doe'; // Error: Cannot assign to read only property 'name'

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

يتم استخدام ديكورات المعلمات لتعديل أو تسجيل معلومات حول معلمات الطريقة.

function LogParameter(target: any, propertyName: string, index: number) {
  const metadataKey = `log_${propertyName}_parameters`;
  
  if (Array.isArray(target[metadataKey])) {
    target[metadataKey].push(index);
  } else {
    target[metadataKey] = [index];
  }
}

class Demo {
  method(@LogParameter param1: string, @LogParameter param2: number) {
    // Method logic
  }
}

خاتمة

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