כיצד ליצור עיצובי TypeScript מותאמים אישית

Decorators הם תכונה ב-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 מציעים יכולות מטא-תכנות חזקות שיכולות לשפר ולהרחיב את הפונקציונליות של מחלקות, שיטות ומאפיינים. באמצעות עיצובים מותאמים אישית, ניתן ליצור מבני קוד ניתנים לשימוש חוזר, יעילים ומאורגנים. מדריך זה הדגים יצירת סוגים שונים של מעצבים: מחלקה, שיטה, נכס ופרמטר.