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