JavaScript Decorators: Metadata og Transformasjon

JavaScript Decorators, en funksjon inspirert av språk som Python og Java, tilbyr en kraftig og uttrykksfull måte å legge til metadata og transformere klasser, metoder, egenskaper og parametere. De gir en ren, deklarativ syntaks for å forbedre kodens funksjonalitet og fremme separasjon av ansvarsområder. Selv om de fortsatt er et relativt nytt tilskudd til JavaScript-økosystemet, blir decorators stadig mer populære, spesielt i rammeverk som Angular og biblioteker som utnytter metadata for avhengighetsinjeksjon og andre avanserte funksjoner. Denne artikkelen utforsker det grunnleggende ved JavaScript-decorators, deres anvendelse og deres potensial for å skape mer vedlikeholdbare og utvidbare kodebaser.

Hva er JavaScript Decorators?

I kjernen er decorators spesielle typer deklarasjoner som kan knyttes til klasser, metoder, accessors, egenskaper eller parametere. De bruker syntaksen @expression, der expression må evaluere til en funksjon som vil bli kalt ved kjøretid med informasjon om den dekorerte deklarasjonen. Decorators fungerer i hovedsak som funksjoner som modifiserer eller utvider atferden til det dekorerte elementet.

Tenk på decorators som en måte å pakke inn eller utvide eksisterende kode uten å endre den direkte. Dette prinsippet, kjent som Decorator-mønsteret i programvaredesign, lar deg legge til funksjonalitet til et objekt dynamisk.

Aktivering av Decorators

Selv om decorators er en del av ECMAScript-standarden, er de ikke aktivert som standard i de fleste JavaScript-miljøer. For å bruke dem, må du vanligvis konfigurere byggeverktøyene dine. Her er hvordan du aktiverer decorators i noen vanlige miljøer:

• TypeScript: Decorators støttes naturlig i TypeScript. Sørg for at kompilatoralternativet experimentalDecorators er satt til true i din tsconfig.json-fil:

            {
  "compilerOptions": {
    "target": "esnext",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true, // Valgfritt, men ofte nyttig
    "module": "commonjs", // Eller et annet modulsystem som "es6" eller "esnext"
    "moduleResolution": "node"
  }
}
            

              
                Copy
              
            
          

• Babel: Hvis du bruker Babel, må du installere og konfigurere @babel/plugin-proposal-decorators-pluginen:

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

            

              
                Copy
              
            
          

Deretter legger du til pluginen i Babel-konfigurasjonen din (f.eks. .babelrc eller babel.config.js):

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

              
                Copy
              
            
          

Alternativet version er viktig og bør samsvare med versjonen av decorator-forslaget du sikter mot. Se dokumentasjonen for Babel-pluginen for den siste anbefalte versjonen.

Typer Decorators

Det finnes flere typer decorators, hver designet for spesifikke elementer:

• Klassedecorators: Brukes på klasser.
• Metodedecorators: Brukes på metoder i en klasse.
• Accessor-decorators: Brukes på getter- eller setter-accessors.
• Egenskapsdecorators: Brukes på egenskaper i en klasse.
• Parameterdecorators: Brukes på parametere i en metode eller konstruktør.

Klassedecorators

Klassedecorators brukes på konstruktøren til en klasse og kan brukes til å observere, modifisere eller erstatte en klassedefinisjon. De mottar klassekonstruktøren som sitt eneste argument.

Eksempel:

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

// Forsøk på å legge til egenskaper til den forseglede klassen eller dens prototype vil mislykkes

            

              
                Copy
              
            
          

I dette eksempelet forhindrer @sealed-decoratoren ytterligere modifikasjoner av Greeter-klassen og dens prototype. Dette kan være nyttig for å sikre immutabilitet eller forhindre utilsiktede endringer.

Metodedecorators

Metodedecorators brukes på metoder i en klasse. De mottar tre argumenter:

• target: Prototypen til klassen (for instansmetoder) eller klassekonstruktøren (for statiske metoder).
• propertyKey: Navnet på metoden som blir dekorert.
• descriptor: Egenskapsbeskrivelsen for metoden.

Eksempel:

            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
              
            
          

Decoratoren @log logger argumentene og returverdien til add-metoden. Dette er et enkelt eksempel på hvordan metodedecorators kan brukes for logging, profilering eller andre tverrgående anliggender.

Accessor-decorators

Accessor-decorators ligner på metodedecorators, men brukes på getter- eller setter-accessors. De mottar også de samme tre argumentene: target, propertyKey og descriptor.

Eksempel:

            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 }); // Ville kastet en feil fordi 'x' ikke er konfigurerbar

            

              
                Copy
              
            
          

Decoratoren @configurable(false) forhindrer at x-getteren blir rekonfigurert, noe som gjør den ikke-konfigurerbar.

Egenskapsdecorators

Egenskapsdecorators brukes på egenskaper i en klasse. De mottar to argumenter:

• target: Prototypen til klassen (for instansegenskaper) eller klassekonstruktøren (for statiske egenskaper).
• propertyKey: Navnet på egenskapen som blir dekorert.

Eksempel:

            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"; // Dette vil forårsake en feil i strict mode fordi 'name' er skrivebeskyttet

            

              
                Copy
              
            
          

Decoratoren @readonly gjør name-egenskapen skrivebeskyttet, og forhindrer at den blir endret etter initialisering.

Parameterdecorators

Parameterdecorators brukes på parametere i en metode eller konstruktør. De mottar tre argumenter:

• target: Prototypen til klassen (for instansmetoder) eller klassekonstruktøren (for statiske metoder eller konstruktører).
• propertyKey: Navnet på metoden eller konstruktøren.
• parameterIndex: Indeksen til parameteren i parameterlisten.

Parameterdecorators brukes ofte med refleksjon for å lagre metadata om parameterne til en funksjon. Disse metadataene kan deretter brukes ved kjøretid for avhengighetsinjeksjon eller andre formål. For at dette skal fungere riktig, må du aktivere kompilatoralternativet emitDecoratorMetadata i din tsconfig.json-fil.

Eksempel (med bruk av 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}`;
  }
}

// Bruk

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 dette eksempelet markerer @required-decoratoren parametere som påkrevde. @validate-decoratoren bruker deretter refleksjon (via reflect-metadata) for å sjekke om de påkrevde parameterne er til stede før metoden kalles. Dette eksempelet viser grunnleggende bruk, og det anbefales å lage robust parametervalidering i et produksjonsscenario.

For å installere reflect-metadata:

            npm install reflect-metadata --save

            

              
                Copy
              
            
          

Bruk av Decorators for Metadata

En av de primære bruksområdene for decorators er å knytte metadata til klasser og deres medlemmer. Disse metadataene kan brukes ved kjøretid til ulike formål, som avhengighetsinjeksjon, serialisering og validering. Biblioteket reflect-metadata gir en standard måte å lagre og hente metadata på.

Eksempel:

            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-fabrikker

Decorator-fabrikker er funksjoner som returnerer en decorator. De lar deg sende argumenter til decoratoren, noe som gjør den mer fleksibel og gjenbrukbar.

Eksempel:

            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
              
            
          

Decorator-fabrikken @deprecated tar en avviklingsmelding som argument og logger en advarsel når den dekorerte metoden kalles. Dette lar deg markere metoder som avviklet og gi veiledning til utviklere om hvordan de kan migrere til nyere alternativer.

Reelle Brukstilfeller

Decorators har et bredt spekter av anvendelser i moderne JavaScript-utvikling:

• Avhengighetsinjeksjon: Rammeverk som Angular er sterkt avhengige av decorators for avhengighetsinjeksjon.
• Routing: I webapplikasjoner kan decorators brukes til å definere ruter for kontrollere og metoder.
• Validering: Decorators kan brukes til å validere inndata og sikre at de oppfyller visse kriterier.
• Autorisasjon: Decorators kan brukes til å håndheve sikkerhetspolicyer og begrense tilgangen til visse metoder eller ressurser.
• Logging og Profilering: Som vist i eksemplene ovenfor, kan decorators brukes for logging og profilering av kodekjøring.
• Tilstandshåndtering: Decorators kan integreres med tilstandshåndteringsbiblioteker for å automatisk oppdatere komponenter når tilstanden endres.

Fordeler med å Bruke Decorators

• Forbedret lesbarhet i koden: Decorators gir en deklarativ syntaks for å legge til funksjonalitet, noe som gjør koden enklere å forstå og vedlikeholde.
• Separering av ansvarsområder: Decorators lar deg separere tverrgående anliggender (f.eks. logging, validering, autorisasjon) fra kjerneforretningslogikken.
• Gjenbrukbarhet: Decorators kan gjenbrukes på tvers av flere klasser og metoder, noe som reduserer kodeduplisering.
• Utvidbarhet: Decorators gjør det enkelt å utvide funksjonaliteten til eksisterende kode uten å endre den direkte.

Utfordringer og Vurderinger

• Læringskurve: Decorators er en relativt ny funksjon, og det kan ta litt tid å lære å bruke dem effektivt.
• Kompatibilitet: Sørg for at målmiljøet ditt støtter decorators og at du har konfigurert byggeverktøyene dine riktig.
• Debugging: Å feilsøke kode som bruker decorators kan være mer utfordrende enn å feilsøke vanlig kode, spesielt hvis decoratorene er komplekse.
• Overforbruk: Unngå å overdrive bruken av decorators, da dette kan gjøre koden din vanskeligere å forstå og vedlikeholde. Bruk dem strategisk for spesifikke formål.
• Kjøretidsoverhead: Decorators kan introdusere noe overhead ved kjøretid, spesielt hvis de utfører komplekse operasjoner. Vurder ytelseskonsekvensene når du bruker decorators i ytelseskritiske applikasjoner.

Konklusjon

JavaScript Decorators er et kraftig verktøy for å forbedre kodens funksjonalitet og fremme separasjon av ansvarsområder. Ved å tilby en ren, deklarativ syntaks for å legge til metadata og transformere klasser, metoder, egenskaper og parametere, kan decorators hjelpe deg med å skape mer vedlikeholdbare, gjenbrukbare og utvidbare kodebaser. Selv om de har en læringskurve og noen potensielle utfordringer, kan fordelene ved å bruke decorators i riktig kontekst være betydelige. Ettersom JavaScript-økosystemet fortsetter å utvikle seg, vil decorators sannsynligvis bli en stadig viktigere del av moderne JavaScript-utvikling.

Vurder å utforske hvordan decorators kan forenkle din eksisterende kode eller gjøre det mulig for deg å skrive mer uttrykksfulle og vedlikeholdbare applikasjoner. Med nøye planlegging og en solid forståelse av deres evner, kan du utnytte decorators til å skape mer robuste og skalerbare JavaScript-løsninger.