Jak używać dekoratorów w TypeScript

Dekoratory w TypeScript to potężna funkcja, która umożliwia programistom dodawanie dodatkowych funkcji do klas, metod, właściwości i parametrów. Zapewniają sposób na modyfikację zachowania istniejącego kodu bez zmiany jego rzeczywistej struktury. Ten przewodnik wyjaśni, jak używać dekoratorów w TypeScript, za pomocą łatwych do naśladowania przykładów.

Czym są dekoratory?

Dekoratory to specjalne funkcje, które można stosować do klas, metod, właściwości lub parametrów. Są one wywoływane w czasie wykonywania i pozwalają programistom na adnotowanie i modyfikowanie kodu w sposób deklaratywny. Aby włączyć dekoratory w projekcie TypeScript, flaga experimentalDecorators musi być ustawiona na true w pliku tsconfig.json.

Włączanie dekoratorów w TypeScript

Aby używać dekoratorów, kompilator TypeScript musi być skonfigurowany tak, aby je rozpoznawał. Można to zrobić, ustawiając flagę experimentalDecorators na true w pliku tsconfig.json.

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

Po włączeniu dekoratorów można ich używać w całym projekcie.

Tworzenie dekoratora klasy

Dekorator klasy jest stosowany do deklaracji klasy i może być używany do modyfikowania lub zastępowania definicji klasy. Dekoratory klasy są deklarowane tuż nad klasą, którą dekorują, za pomocą symbolu @.

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

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

const person = new Person('Alice');

W tym przykładzie dekorator LogClass loguje komunikat, gdy tworzona jest klasa Person. Dekorator jest zdefiniowany jako funkcja, która przyjmuje pojedynczy argument: konstruktor dekorowanej klasy.

Dekoratory metod

Dekoratory metod są stosowane do metod w obrębie klasy. Umożliwiają one programistom przechwytywanie wywołań metod, modyfikowanie ich zachowania lub wykonywanie dodatkowych operacji przed lub po wykonaniu metody.

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

Tutaj dekorator LogMethod rejestruje nazwę metody i jej argumenty, gdy wywoływana jest metoda add. Owija oryginalną metodę w nową funkcję, która wykonuje rejestrowanie przed delegowaniem do oryginalnej metody.

Dekoratorzy nieruchomości

Dekoratory właściwości służą do obserwowania lub modyfikowania zachowania właściwości klasy. W przeciwieństwie do dekoratorów metod nie mają dostępu do samej wartości właściwości, ale mogą dodawać metadane do właściwości.

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

W tym przykładzie dekorator ReadOnly został zastosowany do właściwości title klasy Book, czyniąc ją tylko do odczytu poprzez ustawienie właściwości writable na false.

Dekoratory parametrów

Dekoratory parametrów służą do adnotacji lub modyfikacji parametrów metod. Otrzymują trzy argumenty: obiekt docelowy, nazwę metody i indeks parametru.

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

W tym przykładzie dekorator LogParameter jest stosowany do parametru message metody greet w klasie UserService. Dekorator rejestruje informacje o dekorowanym parametrze.

Wniosek

Dekoratory w TypeScript oferują potężny sposób na zwiększenie funkcjonalności kodu bez zmiany jego struktury. Wykorzystując dekoratory klas, metod, właściwości i parametrów, programiści mogą łatwo dodawać funkcjonalność wielokrotnego użytku w swoich projektach. Dzięki przykładom podanym w tym przewodniku łatwo jest rozpocząć korzystanie z dekoratorów w TypeScript.