Hur man använder dekoratörer i TypeScript

Dekoratörer i TypeScript är en kraftfull funktion som gör det möjligt för utvecklare att lägga till extra funktionalitet till klasser, metoder, egenskaper och parametrar. De tillhandahåller ett sätt att ändra beteendet hos befintlig kod utan att ändra dess faktiska struktur. Den här guiden kommer att förklara hur man använder dekoratörer i TypeScript med lätta att följa exempel.

Vad är dekoratörer?

Dekoratorer är speciella funktioner som kan tillämpas på klasser, metoder, egenskaper eller parametrar. De anropas under körning och tillåter utvecklare att kommentera och ändra kod på ett deklarativt sätt. För att aktivera dekoratörer i ett TypeScript-projekt måste experimentalDecorators-flaggan sättas till true i filen tsconfig.json.

Aktivera dekoratörer i TypeScript

För att använda dekoratörer måste TypeScript-kompilatorn konfigureras för att känna igen dem. Detta kan göras genom att ställa in experimentalDecorators-flaggan till true i filen tsconfig.json.

{
  "compilerOptions": {
    "target": "ES6",
    "experimentalDecorators": true
  }
}

När dekoratörer är aktiverade kan de användas under hela projektet.

Skapa en klassdekoratör

En klassdeklarator tillämpas på en klassdeklaration och kan användas för att ändra eller ersätta en klassdefinition. Klassdekoratörer deklareras precis ovanför klassen de dekorerar med hjälp av symbolen @.

function LogClass(target: Function) {
  console.log(`Class ${target.name} is created.`);
}

@LogClass
class Person {
  constructor(public name: string) {}
}

const person = new Person('Alice');

I det här exemplet loggar LogClass dekoratören ett meddelande när klassen Person skapas. Dekoratorn definieras som en funktion som tar ett enda argument: konstruktören för klassen som dekoreras.

Metoddekoratörer

Metoddekoratörer tillämpas på metoder inom en klass. De tillåter utvecklare att avlyssna metodanrop, ändra deras beteende eller utföra ytterligare operationer innan eller efter att metoden exekveras.

function LogMethod(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyKey} is called with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

class Calculator {
  @LogMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculator();
calc.add(2, 3);

Här loggar LogMethod-dekoratören metodnamnet och dess argument närhelst add-metoden anropas. Den lindar in den ursprungliga metoden i en ny funktion som utför loggningen innan den delegeras till den ursprungliga metoden.

Fastighetsinredare

Fastighetsdekoratörer används för att observera eller ändra beteendet hos klassfastigheter. Till skillnad från metoddekoratörer har de inte tillgång till själva fastighetsvärdet, men de kan lägga till metadata till egenskaper.

function ReadOnly(target: Object, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Book {
  @ReadOnly
  title: string = 'TypeScript Guide';
}

const myBook = new Book();
myBook.title = 'New Title'; // This will cause an error in strict mode

I det här exemplet tillämpas ReadOnly dekoratorn på egenskapen title i klassen Book, vilket gör den skrivskyddad genom att ställa in skrivbar till falskt.

Parameterdekoratörer

Parameterdekoratorer används för att kommentera eller ändra metodparametrar. De får tre argument: målobjektet, metodnamnet och parameterindex.

function LogParameter(target: Object, propertyKey: string, parameterIndex: number) {
  console.log(`Parameter in position ${parameterIndex} at ${propertyKey} method is decorated.`);
}

class UserService {
  greet(@LogParameter message: string): void {
    console.log(message);
  }
}

const userService = new UserService();
userService.greet('Hello, TypeScript!');

I det här exemplet tillämpas LogParameter dekoratorn på parametern meddelande för metoden greet i klassen UserService. Dekoratören loggar information om parametern som dekoreras.

Slutsats

Dekoratörer i TypeScript erbjuder ett kraftfullt sätt att förbättra kodfunktionaliteten utan att ändra dess struktur. Genom att utnyttja klass-, metod-, egenskaps- och parameterdekoratörer kan utvecklare enkelt lägga till återanvändbar funktionalitet i sina projekt. Med exemplen i den här guiden är det lätt att komma igång med att använda dekoratörer i TypeScript.