דקורטורים (Decorators) ב-JavaScript: מטא-דאטה וטרנספורמציה

דקורטורים (Decorators) ב-JavaScript, תכונה שקיבלה השראה משפות כמו Python ו-Java, מספקים דרך עוצמתית והבעתית להוסיף מטא-דאטה ולבצע טרנספורמציה למחלקות, מתודות, מאפיינים ופרמטרים. הם מציעים תחביר נקי והצהרתי לשיפור פונקציונליות הקוד וקידום הפרדת עניינים (separation of concerns). למרות שהם עדיין תוספת חדשה יחסית לאקוסיסטם של JavaScript, דקורטורים צוברים פופולריות, במיוחד במסגרת פריימוורקים כמו Angular וספריות הממנפות מטא-דאטה להזרקת תלויות (dependency injection) ותכונות מתקדמות אחרות. מאמר זה סוקר את יסודות הדקורטורים ב-JavaScript, את יישומם, ואת הפוטנציאל שלהם ליצירת בסיסי קוד ברי-תחזוקה וניתנים להרחבה.

מהם דקורטורים ב-JavaScript?

בבסיסם, דקורטורים הם סוגים מיוחדים של הצהרות שניתן לצרף למחלקות, מתודות, גישה (accessors), מאפיינים או פרמטרים. הם משתמשים בתחביר @expression, כאשר expression חייב להיות מוערך לפונקציה שתופעל בזמן ריצה עם מידע על ההצהרה המעוטרת. דקורטורים פועלים למעשה כפונקציות המשנות או מרחיבות את התנהגות האלמנט המעוטר.

חשבו על דקורטורים כדרך לעטוף או להעשיר קוד קיים מבלי לשנות אותו ישירות. עיקרון זה, המכונה תבנית העיצוב Decorator, מאפשר לכם להוסיף פונקציונליות לאובייקט באופן דינמי.

הפעלת דקורטורים

אף שדקורטורים הם חלק מתקן ECMAScript, הם אינם מופעלים כברירת מחדל ברוב סביבות ה-JavaScript. כדי להשתמש בהם, תצטרכו בדרך כלל להגדיר את כלי הבנייה שלכם. כך מפעילים דקורטורים בכמה סביבות נפוצות:

• TypeScript: דקורטורים נתמכים באופן מובנה ב-TypeScript. ודאו שאפשרות המהדר experimentalDecorators מוגדרת כ-true בקובץ tsconfig.json שלכם:

            {
  "compilerOptions": {
    "target": "esnext",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true, // Optional, but often useful
    "module": "commonjs", // Or another module system like "es6" or "esnext"
    "moduleResolution": "node"
  }
}
            

              
                Copy
              
            
          

• Babel: אם אתם משתמשים ב-Babel, תצטרכו להתקין ולהגדיר את הפלאגין @babel/plugin-proposal-decorators:

            npm install --save-dev @babel/plugin-proposal-decorators

            

              
                Copy
              
            
          

לאחר מכן, הוסיפו את הפלאגין לתצורת ה-Babel שלכם (לדוגמה, .babelrc או babel.config.js):

            {
  "plugins": [["@babel/plugin-proposal-decorators", { "version": "2023-05" }]]
}
            

              
                Copy
              
            
          

אפשרות ה-version חשובה ואמורה להתאים לגרסת הצעת הדקורטורים שאליה אתם מכוונים. עיינו בתיעוד של פלאגין Babel כדי למצוא את הגרסה המומלצת העדכנית ביותר.

סוגי דקורטורים

ישנם מספר סוגים של דקורטורים, כל אחד מיועד לאלמנטים ספציפיים:

• דקורטורים למחלקות (Class Decorators): חלים על מחלקות.
• דקורטורים למתודות (Method Decorators): חלים על מתודות בתוך מחלקה.
• דקורטורים לגישה (Accessor Decorators): חלים על גישה (getter או setter).
• דקורטורים למאפיינים (Property Decorators): חלים על מאפיינים של מחלקה.
• דקורטורים לפרמטרים (Parameter Decorators): חלים על פרמטרים של מתודה או בנאי.

דקורטורים למחלקות (Class Decorators)

דקורטורים למחלקות חלים על הבנאי (constructor) של מחלקה וניתן להשתמש בהם כדי לצפות, לשנות או להחליף הגדרת מחלקה. הם מקבלים את בנאי המחלקה כארגומנט היחיד שלהם.

דוגמה:

            function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

// Attempting to add properties to the sealed class or its prototype will fail

            

              
                Copy
              
            
          

בדוגמה זו, הדקורטור @sealed מונע שינויים נוספים במחלקה Greeter ובאב-הטיפוס (prototype) שלה. זה יכול להיות שימושי להבטחת אי-שינוי (immutability) או למניעת שינויים מקריים.

דקורטורים למתודות (Method Decorators)

דקורטורים למתודות חלים על מתודות בתוך מחלקה. הם מקבלים שלושה ארגומנטים:

• target: אב-הטיפוס של המחלקה (עבור מתודות של מופע) או בנאי המחלקה (עבור מתודות סטטיות).
• propertyKey: שם המתודה המעוטרת.
• descriptor: מתאר המאפיין (property descriptor) עבור המתודה.

דוגמה:

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

  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${propertyKey} returned: ${result}`);
    return result;
  };

  return descriptor;
}

class Calculator {
  @log
  add(x: number, y: number) {
    return x + y;
  }
}

const calculator = new Calculator();
calculator.add(2, 3); // Output: Calling add with arguments: [2,3]
                      //         Method add returned: 5

            

              
                Copy
              
            
          

הדקורטור @log רושם את הארגומנטים ואת ערך ההחזרה של המתודה add. זוהי דוגמה פשוטה לאופן שבו ניתן להשתמש בדקורטורים למתודות עבור רישום (logging), פרופיילינג, או עניינים חוצי-תחומים (cross-cutting concerns) אחרים.

דקורטורים לגישה (Accessor Decorators)

דקורטורים לגישה דומים לדקורטורים למתודות אך חלים על גישת getter או setter. הם גם מקבלים את אותם שלושה ארגומנטים: target, propertyKey, ו-descriptor.

דוגמה:

            function configurable(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.configurable = value;
  };
}

class Point {
  private _x: number;
  private _y: number;

  constructor(x: number, y: number) {
    this._x = x;
    this._y = y;
  }

  @configurable(false)
  get x() {
    return this._x;
  }

  set x(value: number) {
      this._x = value;
  }
}

const point = new Point(1, 2);
// Object.defineProperty(point, 'x', { configurable: true }); // Would throw an error because 'x' is not configurable

            

              
                Copy
              
            
          

הדקורטור @configurable(false) מונע הגדרה מחדש של ה-getter של x, והופך אותו לבלתי-ניתן-להגדרה (non-configurable).

דקורטורים למאפיינים (Property Decorators)

דקורטורים למאפיינים חלים על מאפיינים של מחלקה. הם מקבלים שני ארגומנטים:

• target: אב-הטיפוס של המחלקה (עבור מאפיינים של מופע) או בנאי המחלקה (עבור מאפיינים סטטיים).
• propertyKey: שם המאפיין המעוטר.

דוגמה:

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

class Person {
  @readonly
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const person = new Person("Alice");
// person.name = "Bob"; // This will cause an error in strict mode because 'name' is readonly

            

              
                Copy
              
            
          

הדקורטור @readonly הופך את המאפיין name לקריאה בלבד, ומונע את שינויו לאחר האתחול.

דקורטורים לפרמטרים (Parameter Decorators)

דקורטורים לפרמטרים חלים על פרמטרים של מתודה או בנאי. הם מקבלים שלושה ארגומנטים:

• target: אב-הטיפוס של המחלקה (עבור מתודות של מופע) או בנאי המחלקה (עבור מתודות סטטיות או בנאים).
• propertyKey: שם המתודה או הבנאי.
• parameterIndex: האינדקס של הפרמטר ברשימת הפרמטרים.

דקורטורים לפרמטרים משמשים לעתים קרובות עם רפלקשן (reflection) כדי לאחסן מטא-דאטה על הפרמטרים של פונקציה. ניתן להשתמש במטא-דאטה זה בזמן ריצה להזרקת תלויות או למטרות אחרות. כדי שזה יעבוד כראוי, עליכם להפעיל את אפשרות המהדר emitDecoratorMetadata בקובץ tsconfig.json שלכם.

דוגמה (באמצעות reflect-metadata):

            import 'reflect-metadata';

function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
  let existingRequiredParameters: number[] = Reflect.getOwnMetadata("required", target, propertyKey) || [];
  existingRequiredParameters.push(parameterIndex);
  Reflect.defineMetadata("required", existingRequiredParameters, target, propertyKey);
}

function validate(target: any, propertyName: string, descriptor: TypedPropertyDescriptor) {
  let method = descriptor.value!;

  descriptor.value = function (...args: any[]) {
    let requiredParameters: number[] = Reflect.getOwnMetadata("required", target, propertyName);
    if (requiredParameters) {
      for (let parameterIndex of requiredParameters) {
        if (args[parameterIndex] === null || args[parameterIndex] === undefined) {
          throw new Error(`Missing required argument at index ${parameterIndex}`);
        }
      }
    }
    return method.apply(this, args);
  };
}

class User {
  name: string;
  age: number;

  constructor(@required name: string, public surname: string, @required age: number) {
    this.name = name;
    this.age = age;
  }

  @validate
  greet(prefix: string, @required salutation: string): string {
    return `${prefix} ${salutation} ${this.name}`;
  }
}

// Usage

try {
  const user1 = new User("John", "Doe", 30);
  console.log(user1.greet("Mr.", "Hello"));

  const user2 = new User(undefined as any, "Doe", null as any);

} catch (error) {
  console.error(error.message);
}

try {
  const user = new User("John", "Doe", 30);
  console.log(user.greet("Mr.", undefined as any));
} catch (error) {
  console.error(error.message);
}


            

              
                Copy
              
            
          

בדוגמה זו, הדקורטור @required מסמן פרמטרים כנדרשים. לאחר מכן, הדקורטור @validate משתמש ברפלקשן (באמצעות reflect-metadata) כדי לבדוק אם הפרמטרים הנדרשים קיימים לפני קריאה למתודה. דוגמה זו מציגה שימוש בסיסי, ומומלץ ליצור אימות פרמטרים חזק יותר בסביבת ייצור.

כדי להתקין את reflect-metadata:

            npm install reflect-metadata --save

            

              
                Copy
              
            
          

שימוש בדקורטורים עבור מטא-דאטה

אחד השימושים העיקריים של דקורטורים הוא לצרף מטא-דאטה למחלקות ולחבריהן. ניתן להשתמש במטא-דאטה זה בזמן ריצה למטרות שונות, כגון הזרקת תלויות, סריאליזציה ואימות. ספריית reflect-metadata מספקת דרך סטנדרטית לאחסן ולאחזר מטא-דאטה.

דוגמה:

            import 'reflect-metadata';

const TYPE_KEY = "design:type";
const PARAMTYPES_KEY = "design:paramtypes";
const RETURNTYPE_KEY = "design:returntype";

function Type(type: any) {
    return Reflect.metadata(TYPE_KEY, type);
}


function LogType(target: any, propertyKey: string) {
  const t = Reflect.getMetadata(TYPE_KEY, target, propertyKey);
  console.log(`${target.constructor.name}.${propertyKey} type: ${t.name}`);
}

class Demo {
    @LogType
    public name: string;
    constructor(name: string){
      this.name = name;
    }
}

            

              
                Copy
              
            
          

פקטורי דקורטורים (Decorator Factories)

פקטורי דקורטורים הם פונקציות המחזירות דקורטור. הם מאפשרים לכם להעביר ארגומנטים לדקורטור, מה שהופך אותו לגמיש ורב-שימושי יותר.

דוגמה:

            function deprecated(deprecationReason: string) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
      console.warn(`Method ${propertyKey} is deprecated: ${deprecationReason}`);
      return originalMethod.apply(this, args);
    };

    return descriptor;
  };
}

class LegacyComponent {
  @deprecated("Use the newMethod instead.")
  oldMethod() {
    console.log("Old method called");
  }

  newMethod() {
    console.log("New method called");
  }
}

const component = new LegacyComponent();
component.oldMethod(); // Output: Method oldMethod is deprecated: Use the newMethod instead.
                       //         Old method called

            

              
                Copy
              
            
          

פקטורי הדקורטור @deprecated מקבל הודעת התיישנות כארגומנט ורושם אזהרה כאשר המתודה המעוטרת נקראת. זה מאפשר לכם לסמן מתודות כמיושנות ולספק הנחיות למפתחים כיצד לעבור לחלופות חדשות יותר.

מקרי שימוש בעולם האמיתי

לדקורטורים יש מגוון רחב של יישומים בפיתוח JavaScript מודרני:

• הזרקת תלויות (Dependency Injection): פריימוורקים כמו Angular מסתמכים בכבדות על דקורטורים להזרקת תלויות.
• ניתוב (Routing): ביישומי אינטרנט, ניתן להשתמש בדקורטורים להגדרת נתיבים עבור בקרים ומתודות.
• אימות (Validation): ניתן להשתמש בדקורטורים לאימות נתוני קלט ולוודא שהם עומדים בקריטריונים מסוימים.
• הרשאות (Authorization): ניתן להשתמש בדקורטורים לאכיפת מדיניות אבטחה והגבלת גישה למתודות או משאבים מסוימים.
• רישום ופרופיילינג: כפי שמוצג בדוגמאות לעיל, ניתן להשתמש בדקורטורים לרישום ופרופיילינג של ביצועי קוד.
• ניהול מצב (State Management): דקורטורים יכולים להשתלב עם ספריות ניהול מצב כדי לעדכן רכיבים באופן אוטומטי כאשר המצב משתנה.

יתרונות השימוש בדקורטורים

• קריאות קוד משופרת: דקורטורים מספקים תחביר הצהרתי להוספת פונקציונליות, מה שהופך את הקוד לקל יותר להבנה ולתחזוקה.
• הפרדת עניינים: דקורטורים מאפשרים לכם להפריד עניינים חוצי-תחומים (למשל, רישום, אימות, הרשאות) מהלוגיקה העסקית המרכזית.
• שימוש חוזר: ניתן לעשות שימוש חוזר בדקורטורים על פני מחלקות ומתודות מרובות, מה שמפחית שכפול קוד.
• הרחבה: דקורטורים מקלים על הרחבת הפונקציונליות של קוד קיים מבלי לשנות אותו ישירות.

אתגרים ושיקולים

• עקומת למידה: דקורטורים הם תכונה חדשה יחסית, וייתכן שידרש זמן ללמוד כיצד להשתמש בהם ביעילות.
• תאימות: ודאו שסביבת היעד שלכם תומכת בדקורטורים ושהגדרתם נכון את כלי הבנייה שלכם.
• ניפוי באגים (Debugging): ניפוי באגים בקוד המשתמש בדקורטורים יכול להיות מאתגר יותר מניפוי באגים בקוד רגיל, במיוחד אם הדקורטורים מורכבים.
• שימוש יתר: הימנעו משימוש יתר בדקורטורים, שכן הדבר עלול להקשות על הבנת הקוד ותחזוקתו. השתמשו בהם באופן אסטרטגי למטרות ספציפיות.
• תקורה בזמן ריצה: דקורטורים יכולים להוסיף תקורה מסוימת בזמן ריצה, במיוחד אם הם מבצעים פעולות מורכבות. שקלו את השלכות הביצועים בעת שימוש בדקורטורים ביישומים קריטיים לביצועים.

סיכום

דקורטורים ב-JavaScript הם כלי רב עוצמה לשיפור פונקציונליות הקוד ולקידום הפרדת עניינים. על ידי מתן תחביר נקי והצהרתי להוספת מטא-דאטה וטרנספורמציה למחלקות, מתודות, מאפיינים ופרמטרים, דקורטורים יכולים לעזור לכם ליצור בסיסי קוד ברי-תחזוקה, רב-שימושיים וניתנים להרחבה. למרות שהם מגיעים עם עקומת למידה וכמה אתגרים פוטנציאליים, היתרונות של שימוש בדקורטורים בהקשר הנכון יכולים להיות משמעותיים. ככל שהאקוסיסטם של JavaScript ממשיך להתפתח, סביר להניח שדקורטורים יהפכו לחלק חשוב יותר ויותר בפיתוח JavaScript מודרני.

שקלו לבחון כיצד דקורטורים יכולים לפשט את הקוד הקיים שלכם או לאפשר לכם לכתוב יישומים הבעתיים וברי-תחזוקה יותר. עם תכנון קפדני והבנה מוצקה של יכולותיהם, תוכלו למנף דקורטורים ליצירת פתרונות JavaScript חזקים ומדרגיים יותר.