JavaScript-dekoratorer: Metadata och transformation

JavaScript-dekoratorer, en funktion inspirerad av språk som Python och Java, erbjuder ett kraftfullt och uttrycksfullt sätt att lägga till metadata och transformera klasser, metoder, egenskaper och parametrar. De erbjuder en ren, deklarativ syntax för att förbättra kodens funktionalitet och främja separation av ansvarsområden (separation of concerns). Även om de fortfarande är ett relativt nytt tillskott i JavaScript-ekosystemet, ökar dekoratorer i popularitet, särskilt inom ramverk som Angular och bibliotek som använder metadata för beroendeinjektion (dependency injection) och andra avancerade funktioner. Den här artikeln utforskar grunderna i JavaScript-dekoratorer, deras tillämpning och deras potential för att skapa mer underhållbara och utbyggbara kodbaser.

Vad är JavaScript-dekoratorer?

I grunden är dekoratorer speciella typer av deklarationer som kan kopplas till klasser, metoder, accessorer, egenskaper eller parametrar. De använder syntaxen @expression, där expression måste utvärderas till en funktion som anropas vid körning med information om den dekorerade deklarationen. Dekoratorer fungerar i huvudsak som funktioner som modifierar eller utökar beteendet hos det dekorerade elementet.

Tänk på dekoratorer som ett sätt att omsluta eller utöka befintlig kod utan att direkt modifiera den. Denna princip, känd som dekoratormönstret (Decorator pattern) inom mjukvarudesign, låter dig lägga till funktionalitet till ett objekt dynamiskt.

Aktivera dekoratorer

Även om dekoratorer är en del av ECMAScript-standarden är de inte aktiverade som standard i de flesta JavaScript-miljöer. För att använda dem behöver du vanligtvis konfigurera dina byggverktyg. Så här aktiverar du dekoratorer i några vanliga miljöer:

• TypeScript: Dekoratorer stöds inbyggt i TypeScript. Se till att kompileringsalternativet experimentalDecorators är satt till true i din tsconfig.json-fil:

            {
  "compilerOptions": {
    "target": "esnext",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true, // Valfritt, men ofta användbart
    "module": "commonjs", // Eller ett annat modulsystem som "es6" eller "esnext"
    "moduleResolution": "node"
  }
}
            

              
                Copy
              
            
          

• Babel: Om du använder Babel måste du installera och konfigurera insticksprogrammet @babel/plugin-proposal-decorators:

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

            

              
                Copy
              
            
          

Lägg sedan till insticksprogrammet i din Babel-konfiguration (t.ex. .babelrc eller babel.config.js):

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

              
                Copy
              
            
          

Alternativet version är viktigt och bör matcha den version av dekoratorförslaget du siktar på. Konsultera dokumentationen för Babel-insticksprogrammet för den senaste rekommenderade versionen.

Typer av dekoratorer

Det finns flera typer av dekoratorer, var och en utformad för specifika element:

• Klassdekoratorer: Tillämpas på klasser.
• Metoddekoratorer: Tillämpas på metoder inom en klass.
• Accessordekoratorer: Tillämpas på getter- eller setter-accessorer.
• Egenskapsdekoratorer: Tillämpas på en klasss egenskaper.
• Parameterdekoratorer: Tillämpas på parametrar i en metod eller konstruktor.

Klassdekoratorer

Klassdekoratorer tillämpas på en klass konstruktor och kan användas för att observera, modifiera eller ersätta en klassdefinition. De tar emot klassens konstruktor som sitt enda argument.

Exempel:

            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;
  }
}

// Försök att lägga till egenskaper till den förseglade klassen eller dess prototyp kommer att misslyckas

            

              
                Copy
              
            
          

I det här exemplet förhindrar @sealed-dekoratorn ytterligare modifieringar av klassen Greeter och dess prototyp. Detta kan vara användbart för att säkerställa oföränderlighet (immutability) eller förhindra oavsiktliga ändringar.

Metoddekoratorer

Metoddekoratorer tillämpas på metoder inom en klass. De tar emot tre argument:

• target: Klassens prototyp (för instansmetoder) eller klasskonstruktorn (för statiska metoder).
• propertyKey: Namnet på metoden som dekoreras.
• descriptor: Egenskapsbeskrivaren (property descriptor) för metoden.

Exempel:

            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); // Utskrift: Calling add with arguments: [2,3]
                      //         Method add returned: 5

            

              
                Copy
              
            
          

@log-dekoratorn loggar argumenten och returvärdet för add-metoden. Detta är ett enkelt exempel på hur metoddekoratorer kan användas för loggning, profilering eller andra tvärgående ansvarsområden (cross-cutting concerns).

Accessordekoratorer

Accessordekoratorer liknar metoddekoratorer men tillämpas på getter- eller setter-accessorer. De tar också emot samma tre argument: target, propertyKey och descriptor.

Exempel:

            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 }); // Skulle kasta ett fel eftersom 'x' inte är konfigurerbar

            

              
                Copy
              
            
          

Dekoratorn @configurable(false) förhindrar att x-gettern omkonfigureras, vilket gör den icke-konfigurerbar.

Egenskapsdekoratorer

Egenskapsdekoratorer tillämpas på en klasss egenskaper. De tar emot två argument:

• target: Klassens prototyp (för instansegenskaper) eller klasskonstruktorn (för statiska egenskaper).
• propertyKey: Namnet på egenskapen som dekoreras.

Exempel:

            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"; // Detta kommer att orsaka ett fel i strict mode eftersom 'name' är skrivskyddad

            

              
                Copy
              
            
          

@readonly-dekoratorn gör egenskapen name skrivskyddad, vilket förhindrar att den ändras efter initiering.

Parameterdekoratorer

Parameterdekoratorer tillämpas på parametrar i en metod eller konstruktor. De tar emot tre argument:

• target: Klassens prototyp (för instansmetoder) eller klasskonstruktorn (för statiska metoder eller konstruktorer).
• propertyKey: Namnet på metoden eller konstruktorn.
• parameterIndex: Parameterns index i parameterlistan.

Parameterdekoratorer används ofta med reflektion för att lagra metadata om en funktions parametrar. Denna metadata kan sedan användas vid körning för beroendeinjektion eller andra syften. För att detta ska fungera korrekt måste du aktivera kompileringsalternativet emitDecoratorMetadata i din tsconfig.json-fil.

Exempel (med 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}`;
  }
}

// Användning

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
              
            
          

I det här exemplet markerar @required-dekoratorn parametrar som obligatoriska. @validate-dekoratorn använder sedan reflektion (via reflect-metadata) för att kontrollera om de obligatoriska parametrarna finns innan metoden anropas. Detta exempel visar grundläggande användning, och det rekommenderas att skapa robust parametervalidering i ett produktionsscenario.

För att installera reflect-metadata:

            npm install reflect-metadata --save

            

              
                Copy
              
            
          

Använda dekoratorer för metadata

En av de primära användningsområdena för dekoratorer är att bifoga metadata till klasser och deras medlemmar. Denna metadata kan användas vid körning för olika ändamål, såsom beroendeinjektion, serialisering och validering. Biblioteket reflect-metadata erbjuder ett standardiserat sätt att lagra och hämta metadata.

Exempel:

            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
              
            
          

Dekoratorfabriker

Dekoratorfabriker är funktioner som returnerar en dekorator. De låter dig skicka argument till dekoratorn, vilket gör den mer flexibel och återanvändbar.

Exempel:

            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(); // Utskrift: Method oldMethod is deprecated: Use the newMethod instead.
                       //         Old method called

            

              
                Copy
              
            
          

Dekoratorfabriken @deprecated tar ett utfasningsmeddelande som argument och loggar en varning när den dekorerade metoden anropas. Detta gör att du kan markera metoder som utfasade och ge vägledning till utvecklare om hur de kan migrera till nyare alternativ.

Verkliga användningsfall

Dekoratorer har ett brett spektrum av tillämpningar i modern JavaScript-utveckling:

• Beroendeinjektion (Dependency Injection): Ramverk som Angular förlitar sig starkt på dekoratorer för beroendeinjektion.
• Routing: I webbapplikationer kan dekoratorer användas för att definiera rutter för controllers och metoder.
• Validering: Dekoratorer kan användas för att validera indata och säkerställa att den uppfyller vissa kriterier.
• Auktorisation: Dekoratorer kan användas för att upprätthålla säkerhetspolicyer och begränsa åtkomst till vissa metoder eller resurser.
• Loggning och profilering: Som visats i exemplen ovan kan dekoratorer användas för att logga och profilera kodexekvering.
• Tillståndshantering (State Management): Dekoratorer kan integreras med bibliotek för tillståndshantering för att automatiskt uppdatera komponenter när tillståndet ändras.

Fördelar med att använda dekoratorer

• Förbättrad kodläsbarhet: Dekoratorer erbjuder en deklarativ syntax för att lägga till funktionalitet, vilket gör koden lättare att förstå och underhålla.
• Separation av ansvarsområden (Separation of Concerns): Dekoratorer låter dig separera tvärgående ansvarsområden (t.ex. loggning, validering, auktorisation) från den centrala affärslogiken.
• Återanvändbarhet: Dekoratorer kan återanvändas över flera klasser och metoder, vilket minskar kodduplicering.
• Utbyggbarhet: Dekoratorer gör det enkelt att utöka funktionaliteten i befintlig kod utan att modifiera den direkt.

Utmaningar och överväganden

• Inlärningskurva: Dekoratorer är en relativt ny funktion, och det kan ta lite tid att lära sig att använda dem effektivt.
• Kompatibilitet: Se till att din målmiljö stöder dekoratorer och att du har konfigurerat dina byggverktyg korrekt.
• Felsökning: Att felsöka kod som använder dekoratorer kan vara mer utmanande än att felsöka vanlig kod, särskilt om dekoratorerna är komplexa.
• Överanvändning: Undvik att överanvända dekoratorer, eftersom det kan göra din kod svårare att förstå och underhålla. Använd dem strategiskt för specifika ändamål.
• Prestandakostnad vid körning (Runtime Overhead): Dekoratorer kan medföra en viss prestandakostnad, särskilt om de utför komplexa operationer. Överväg prestandakonsekvenserna när du använder dekoratorer i prestandakritiska applikationer.

Slutsats

JavaScript-dekoratorer är ett kraftfullt verktyg för att förbättra kodens funktionalitet och främja separation av ansvarsområden. Genom att erbjuda en ren, deklarativ syntax för att lägga till metadata och transformera klasser, metoder, egenskaper och parametrar kan dekoratorer hjälpa dig att skapa mer underhållbara, återanvändbara och utbyggbara kodbaser. Även om de har en inlärningskurva och vissa potentiella utmaningar, kan fördelarna med att använda dekoratorer i rätt sammanhang vara betydande. I takt med att JavaScript-ekosystemet fortsätter att utvecklas kommer dekoratorer troligen att bli en allt viktigare del av modern JavaScript-utveckling.

Överväg att utforska hur dekoratorer kan förenkla din befintliga kod eller göra det möjligt för dig att skriva mer uttrycksfulla och underhållbara applikationer. Med noggrann planering och en gedigen förståelse för deras kapacitet kan du utnyttja dekoratorer för att skapa mer robusta och skalbara JavaScript-lösningar.