Forstå TypeScript-dekoratorer

TypeScript-dekoratorer giver en effektiv måde at tilføje funktionalitet til klasser, metoder, egenskaber og parametre under kørsel. De bruges ofte i rammer som Angular til afhængighedsinjektion, logning, validering og mere. Denne artikel vil forklare de forskellige typer dekoratører i TypeScript, og hvordan man bruger dem effektivt.

Hvad er TypeScript-dekoratorer?

Dekoratorer i TypeScript er funktioner, der er præfikset med et @ symbol og kan knyttes til forskellige elementer som klasser, metoder eller egenskaber. De giver dig mulighed for at ændre adfærden for den kode, de er knyttet til, uden at ændre koden direkte.

Typer af dekoratører

• Klassedekoratører: Anvendes på en hel klasse.
• Metodedekoratører: Anvendt på en metode inden for en klasse.
• Ejendomsdekoratører: Anvendes på en ejendom i en klasse.
• Parameter Decorators: Anvendt på parametrene for en metode i en klasse.

Sådan aktiveres dekoratører i TypeScript

Før du kan bruge dekoratører, skal du sørge for at aktivere dem i din tsconfig.json fil ved at indstille "experimentalDecorators" til true.

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

Klasse dekoratører

En klassedekoratør anvendes på en hel klasse. Det er nyttigt til at tilføje metadata eller ændre adfærden for 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 anvendes på metoder inden for en klasse. Disse dekoratører kan bruges til at ændre eller logge en metodes adfærd.

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'

Ejendomsdekoratører

Ejendomsdekoratører bruges til at tilføje funktionalitet til ejendomme i en klasse. De kan være nyttige til validering eller til at tilføje metadata til en ejendom.

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'

Parameter dekoratører

Parameterdekoratorer bruges til at ændre eller logge oplysninger om metodeparametre.

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

Konklusion

Dekoratorer i TypeScript giver en effektiv måde at forbedre funktionaliteten af ​​din kode på uden at ændre dens struktur. Ved at forstå, hvordan du bruger klasse-, metode-, egenskabs- og parameterdekoratorer, kan du implementere avancerede funktioner som logning, validering og afhængighedsinjektion. Dekoratorer er en nøglefunktion i TypeScript, der i høj grad kan forbedre din udviklingsarbejdsgang, især i store applikationer.