Zrozumienie dekoratorów TypeScript

Dekoratory TypeScript zapewniają potężny sposób dodawania funkcjonalności do klas, metod, właściwości i parametrów w czasie wykonywania. Są często używane w frameworkach, takich jak Angular, do wstrzykiwania zależności, rejestrowania, walidacji i innych. Ten artykuł wyjaśni różne typy dekoratorów w TypeScript i jak ich skutecznie używać.

Czym są dekoratory TypeScript?

Dekoratory w TypeScript to funkcje, które są poprzedzone symbolem @ i mogą być dołączone do różnych elementów, takich jak klasy, metody lub właściwości. Umożliwiają one modyfikowanie zachowania kodu, do którego są dołączone, bez bezpośredniej zmiany kodu.

Rodzaje dekoratorów

• Dekoratory klasy: Stosowane do całej klasy.
• Dekoratory metod: Stosowane do metody w klasie.
• Dekoratory właściwości: Stosowane do właściwości w klasie.
• Dekoratory parametrów: Stosowane do parametrów metody w klasie.

Jak włączyć dekoratory w TypeScript

Zanim zaczniesz używać dekoratorów, upewnij się, że są one włączone w pliku tsconfig.json, ustawiając parametr "experimentalDecorators" na true.

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

Dekoratorzy klas

Dekorator klasy jest stosowany do całej klasy. Jest przydatny do dodawania metadanych lub modyfikowania zachowania klasy.

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'

Dekoratory metod

Dekoratory metod są stosowane do metod w obrębie klasy. Dekoratory te mogą być używane do modyfikowania lub rejestrowania zachowania metody.

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'

Dekoratorzy nieruchomości

Dekoratory właściwości służą do dodawania funkcjonalności do właściwości w klasie. Mogą być przydatne do walidacji lub dodawania metadanych do właściwości.

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'

Dekoratory parametrów

Dekoratory parametrów służą do modyfikowania lub rejestrowania informacji o parametrach metody.

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

Wniosek

Dekoratory w TypeScript zapewniają potężny sposób na zwiększenie funkcjonalności kodu bez modyfikowania jego struktury. Rozumiejąc, jak używać dekoratorów klas, metod, właściwości i parametrów, możesz wdrożyć zaawansowane funkcje, takie jak rejestrowanie, walidacja i wstrzykiwanie zależności. Dekoratory są kluczową funkcją w TypeScript, która może znacznie usprawnić przepływ pracy programistycznej, szczególnie w dużych aplikacjach.