Förstå TypeScript-dekoratörer

TypeScript-dekoratörer ger ett kraftfullt sätt att lägga till funktionalitet till klasser, metoder, egenskaper och parametrar vid körning. De används ofta i ramverk som Angular för beroendeinjektion, loggning, validering och mer. Den här artikeln kommer att förklara de olika typerna av dekoratörer i TypeScript och hur man använder dem effektivt.

Vad är TypeScript-dekoratörer?

Dekoratörer i TypeScript är funktioner som har prefixet en @ symbol och kan kopplas till olika element som klasser, metoder eller egenskaper. De låter dig ändra beteendet hos koden de är kopplade till, utan att ändra koden direkt.

Typer av dekoratörer

• Klassdekoratörer: Gäller en hel klass.
• Metoddekoratörer: Tillämpas på en metod inom en klass.
• Fastighetsdekoratörer: Tillämpas på en fastighet i en klass.
• Parameterdekoratörer: Tillämpas på parametrarna för en metod i en klass.

Hur man aktiverar dekoratörer i TypeScript

Innan du kan använda dekoratörer, se till att aktivera dem i filen tsconfig.json genom att ställa in "experimentalDecorators" till true.

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

Klass dekoratörer

En klassdekoratör tillämpas på en hel klass. Det är användbart för att lägga till metadata eller ändra beteendet hos en klass.

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'

Metoddekoratörer

Metoddekoratörer tillämpas på metoder inom en klass. Dessa dekoratörer kan användas för att modifiera eller logga beteendet hos en metod.

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'

Fastighetsinredare

Fastighetsdekoratörer används för att lägga till funktionalitet till fastigheter i en klass. De kan vara användbara för validering eller för att lägga till metadata till 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 används för att modifiera eller logga information om metodparametrar.

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

Slutsats

Dekoratörer i TypeScript ger ett kraftfullt sätt att förbättra din kods funktionalitet utan att ändra dess struktur. Genom att förstå hur du använder klass-, metod-, egenskaps- och parameterdekoratorer kan du implementera avancerade funktioner som loggning, validering och beroendeinjektion. Dekoratörer är en nyckelfunktion i TypeScript som avsevärt kan förbättra ditt utvecklingsarbetsflöde, särskilt i stora applikationer.