Hvordan bruke dekoratorer i TypeScript

Dekoratorer i TypeScript er en kraftig funksjon som gjør det mulig for utviklere å legge til ekstra funksjonalitet til klasser, metoder, egenskaper og parametere. De gir en måte å endre oppførselen til eksisterende kode uten å endre den faktiske strukturen. Denne veiledningen vil forklare hvordan du bruker dekoratører i TypeScript med enkle å følge eksempler.

Hva er dekoratører?

Dekoratorer er spesielle funksjoner som kan brukes på klasser, metoder, egenskaper eller parametere. De påkalles under kjøring og lar utviklere kommentere og endre kode på en deklarativ måte. For å aktivere dekoratører i et TypeScript-prosjekt, må experimentalDecorators-flagget settes til true i tsconfig.json-filen.

Aktivering av dekoratører i TypeScript

For å bruke dekoratører må TypeScript-kompilatoren konfigureres til å gjenkjenne dem. Dette kan gjøres ved å sette experimentalDecorators-flagget til true i tsconfig.json-filen.

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

Når dekoratører er aktivert, kan de brukes gjennom hele prosjektet.

Opprette en klassedekoratør

En klassedekorator brukes på en klasseerklæring og kan brukes til å endre eller erstatte en klassedefinisjon. Klassedekoratører erklæres like over klassen de dekorerer ved å bruke @-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 eksemplet logger LogClass-dekoratøren en melding når Person-klassen opprettes. Dekoratoren er definert som en funksjon som tar et enkelt argument: konstruktøren av klassen som blir dekorert.

Metode Dekoratører

Metodedekoratorer brukes på metoder innenfor en klasse. De lar utviklere fange opp metodeanrop, endre oppførselen deres eller utføre tilleggsoperasjoner før eller etter at metoden er utfø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 kalles. Den pakker inn den opprinnelige metoden i en ny funksjon som utfører loggingen før delegering til den opprinnelige metoden.

Eiendomsdekoratører

Eiendomsdekoratører brukes til å observere eller endre oppførselen til klasseeiendommer. I motsetning til metodedekoratører har de ikke tilgang til selve eiendomsverdien, men de kan legge til metadata til eiendommer.

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 eksemplet brukes ReadOnly-dekoratoren på title-egenskapen til Book-klassen, noe som gjør den skrivebeskyttet ved å sette skrivbar til false.

Parameterdekoratører

Parameterdekoratorer brukes til å kommentere eller endre metodeparametere. De mottar tre argumenter: målobjektet, metodenavnet og parameterindeksen.

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 eksemplet brukes LogParameter-dekoratoren på message-parameteren til greet-metoden i UserService-klassen. Dekoratøren logger informasjon om parameteren som blir dekorert.

Konklusjon

Dekoratorer i TypeScript tilbyr en kraftig måte å forbedre kodefunksjonaliteten uten å endre strukturen. Ved å utnytte klasse-, metode-, eiendoms- og parameterdekoratorer kan utviklere enkelt legge til gjenbrukbar funksjonalitet på tvers av prosjektene sine. Med eksemplene i denne veiledningen er det enkelt å komme i gang med å bruke dekoratorer i TypeScript.