Sådan bruges dekoratorer i TypeScript

Dekoratorer i TypeScript er en kraftfuld funktion, der gør det muligt for udviklere at tilføje ekstra funktionalitet til klasser, metoder, egenskaber og parametre. De giver en måde at ændre adfærden af ​​eksisterende kode uden at ændre dens faktiske struktur. Denne guide vil forklare, hvordan du bruger dekoratorer i TypeScript med eksempler, der er nemme at følge.

Hvad er dekoratører?

Dekoratorer er specielle funktioner, der kan anvendes på klasser, metoder, egenskaber eller parametre. De påkaldes under kørsel og giver udviklere mulighed for at kommentere og ændre kode på en deklarativ måde. For at aktivere dekoratører i et TypeScript-projekt skal experimentalDecorators-flaget indstilles til true i filen tsconfig.json.

Aktivering af dekoratører i TypeScript

For at bruge dekoratører skal TypeScript-kompileren konfigureres til at genkende dem. Dette kan gøres ved at sætte experimentalDecorators flaget til true i filen tsconfig.json.

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

Når dekoratører er aktiveret, kan de bruges gennem hele projektet.

Oprettelse af en klassedekoratør

En klassedekorator anvendes på en klasseerklæring og kan bruges til at ændre eller erstatte en klassedefinition. Klassedekoratører erklæres lige over den klasse, de dekorerer, ved hjælp af @ symbolet.

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

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

const person = new Person('Alice');

I dette eksempel logger LogClass-dekoratøren en besked, når Person-klassen oprettes. Dekoratoren er defineret som en funktion, der tager et enkelt argument: konstruktøren af ​​den klasse, der dekoreres.

Metode dekoratører

Metodedekoratorer anvendes på metoder inden for en klasse. De giver udviklere mulighed for at opsnappe metodekald, ændre deres adfærd eller udføre yderligere operationer før eller efter metoden er udført.

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

Her logger LogMethod-dekoratøren metodenavnet og dets argumenter, hver gang add-metoden kaldes. Den pakker den oprindelige metode ind i en ny funktion, der udfører logningen, før den uddelegeres til den originale metode.

Ejendomsdekoratører

Ejendomsdekoratører bruges til at observere eller ændre adfærden af ​​klasseejendomme. I modsætning til metodedekoratører har de ikke adgang til selve ejendomsværdien, men de kan tilføje metadata til ejendomme.

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 dette eksempel anvendes ReadOnly dekoratoren på title egenskaben for Book klassen, hvilket gør den skrivebeskyttet ved at indstille skrivbar til falsk.

Parameter dekoratører

Parameterdekoratorer bruges til at kommentere eller ændre metodeparametre. De modtager tre argumenter: målobjektet, metodenavnet og parameterindekset.

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 dette eksempel anvendes LogParameter-dekoratoren på message-parameteren i greet-metoden i UserService-klassen. Dekoratøren logger information om den parameter, der dekoreres.

Konklusion

Dekoratorer i TypeScript tilbyder en effektiv måde at forbedre kodefunktionaliteten på uden at ændre dens struktur. Ved at udnytte klasse-, metode-, ejendoms- og parameterdekoratorer kan udviklere nemt tilføje genanvendelig funktionalitet på tværs af deres projekter. Med eksemplerne i denne vejledning er det nemt at komme i gang med at bruge dekoratorer i TypeScript.