Wprowadzenie do dekoratorów

Dekoratory w TypeScript to specjalne funkcje, które umożliwiają dodawanie metadanych lub modyfikowanie zachowania klas, metod i właściwości.

Są często używane we frameworkach takich jak Angular, aby uprościć tworzenie aplikacji.

Jak działają dekoratory

Dekorator to funkcja stosowana do klasy lub jej elementów, takich jak metody i właściwości.

Na przykład @Component w Angularze to dekorator, który dodaje metadane do klasy, aby zdefiniować ją jako komponent.

Korzystanie z wbudowanych dekoratorów

TypeScript udostępnia wbudowane dekoratory, takie jak:

• @readonly: sprawia, że właściwość jest tylko do odczytu.
• @enumerable: określa, czy właściwość jest uwzględniana podczas wyliczania.

Dekoratory te pomagają bezpośrednio modyfikować zachowanie właściwości lub metod.

Tworzenie prostego dekoratora

Można utworzyć własny dekorator, aby rejestrować komunikaty lub dodawać funkcjonalność:

Należy zastosować go do właściwości: @Log.

function Log(target: any, propertyName: string) {
  console.log(`Property ${propertyName} was accessed`);
}

Dekoratory klas

Dekoratory klas służą do modyfikowania lub rozszerzania zachowania całej klasy:

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Należy zastosować go do klasy: @SimpleDecorator.

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Dekoratory metod

Dekoratory metod modyfikują zachowanie metody klasy:

Należy użyć go dla metody: @LogMethod.

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(`Method ${propertyKey} was called`);
}

Korzystanie z dekoratorów w Angularze

Angular intensywnie korzysta z dekoratorów do dodawania metadanych do swoich komponentów:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

Dekorator @Component definiuje klasę jako komponent Angulara.

Dobre praktyki korzystania z dekoratorów

Podczas korzystania z dekoratorów należy:

• Utrzymywać je w prostocie i koncentrować je na jednym zadaniu.
• Używać ich do metadanych, a nie do złożonej logiki.
• W miarę możliwości korzystać z wbudowanych dekoratorów, aby oszczędzać czas.

Gratulacje!

Poznali Państwo sposób działania dekoratorów w TypeScript oraz dowiedzieli się, jak można ich używać do modyfikowania lub rozszerzania kodu. Warto nadal eksperymentować z dekoratorami, aby doskonalić ich wykorzystanie w swoich projektach!