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