Forstå TypeScript-dekoratorer

TypeScript-dekoratorer gir en kraftig måte å legge til funksjonalitet til klasser, metoder, egenskaper og parametere under kjøring. De brukes ofte i rammeverk som Angular for avhengighetsinjeksjon, logging, validering og mer. Denne artikkelen vil forklare de forskjellige typer dekoratører i TypeScript og hvordan du bruker dem effektivt.

Hva er TypeScript-dekoratorer?

Dekoratorer i TypeScript er funksjoner som er prefikset med et @-symbol og kan knyttes til ulike elementer som klasser, metoder eller egenskaper. De lar deg endre oppførselen til koden de er knyttet til, uten å endre koden direkte.

Typer dekoratører

• Klassedekoratører: Gjelder en hel klasse.
• Metodedekoratorer: Brukes på en metode innenfor en klasse.
• Eiendomsdekoratører: Gjelder en eiendom i en klasse.
• Parameterdekoratorer: Brukes på parametrene til en metode i en klasse.

Slik aktiverer du dekoratører i TypeScript

Før du kan bruke dekoratorer, sørg for å aktivere dem i tsconfig.json-filen ved å sette "experimentalDecorators" til true.

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Klasse dekoratører

En klassedekoratør brukes på en hel klasse. Det er nyttig for å legge til metadata eller endre oppførselen til en klasse.

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'

Metode Dekoratører

Metodedekoratorer brukes på metoder innenfor en klasse. Disse dekoratørene kan brukes til å endre eller logge oppførselen til en metode.

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'

Eiendomsdekoratører

Eiendomsdekoratører brukes til å legge til funksjonalitet til eiendommer i en klasse. De kan være nyttige for validering eller for å legge til metadata til en egenskap.

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'

Parameterdekoratører

Parameterdekoratorer brukes til å modifisere eller logge informasjon om metodeparametere.

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

Konklusjon

Dekoratorer i TypeScript gir en kraftig måte å forbedre funksjonaliteten til koden uten å endre strukturen. Ved å forstå hvordan du bruker klasse-, metode-, egenskaps- og parameterdekoratorer, kan du implementere avanserte funksjoner som logging, validering og avhengighetsinjeksjon. Dekoratorer er en nøkkelfunksjon i TypeScript som i stor grad kan forbedre utviklingsarbeidsflyten din, spesielt i store applikasjoner.