Summary - Decorators
- TypeScript course
- Intermediate
- Lesson 48/89
- 4 min
Write a logging layer with decorators.
Summary - Decorators
Decorators are functions that annotate and modify classes, methods, and properties. A class decorator takes the constructor; a method decorator takes (target, key, descriptor); a property decorator takes (target, key). Factories return parameterized decorators. Combined, they form logging, validation, and metadata layers.
function LogCagri(etiket: string) {
return function(target: any, key: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(etiket + " çağrıldı");
return original.apply(this, args);
};
};
}Practice Write a logging layer
Write the LogCagri factory taking (etiket: string) and returning a decorator with signature (target: any, key: string, descriptor: PropertyDescriptor): void. In the decorator body, save original = descriptor.value; replace descriptor.value with a function that prints console.log(etiket + " çağrıldı") and returns original.apply(this, args). Write class Hesap with method topla(a: number, b: number): number returning a + b. Get the descriptor of topla with Object.getOwnPropertyDescriptor, call the factory with the "HESAP" label and apply the returned decorator in two steps, write it back with Object.defineProperty. Add 4 and 5 by calling the addition method on a Hesap instance and print the result.
Starter code
// LogCagri fabrikasını yaz: etiket: string alır
// (target, key, descriptor) imzalı decorator döndürsün
// original = descriptor.value kaydet
// descriptor.value'yu loglayan ve original.apply döndüren fonksiyonla değiştir
// Hesap sınıfı, topla(a, b) metodu a+b döndürsün
// topla'nın descriptor'unu Object.getOwnPropertyDescriptor ile al
// Fabrikayı "HESAP" etiketiyle çağır, dönen decorator'u iki adımlı uygula
// Object.defineProperty ile geri yaz
// Hesap örneği üzerinde 4 ve 5'i topla, sonucu yazdırSample solution
function LogCagri(etiket: string): (target: any, key: string, descriptor: PropertyDescriptor) => void {
return function(target: any, key: string, descriptor: PropertyDescriptor): void {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(etiket + " çağrıldı");
return original.apply(this, args);
};
};
}
class Hesap {
topla(a: number, b: number): number {
return a + b;
}
}
const desc = Object.getOwnPropertyDescriptor(Hesap.prototype, "topla")!;
LogCagri("HESAP")(Hesap.prototype, "topla", desc);
Object.defineProperty(Hesap.prototype, "topla", desc);
console.log(new Hesap().topla(4, 5));Expected output
HESAP çağrıldı 9
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which decorator type is used to change a method's behavior?
- A method decorator Correct answer
- A class decorator
- A property decorator
- Only a factory
Explanation: To change a method's behavior you use a method decorator; by modifying descriptor.value the method itself is wrapped. A class decorator processes the class; a property decorator processes a property name.
2 Return a decorator from the factory
function LogCagri(etiket: string) {
return ____(target: any, key: string, descriptor: PropertyDescriptor): void {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(etiket);
return original.apply(this, args);
};
};
}function LogCagri(etiket: string) {
return function(target: any, key: string, descriptor: PropertyDescriptor): void {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(etiket);
return original.apply(this, args);
};
};
}Explanation: The factory must return a decorator function; that is why you write return function. class requires a class body; new is an expression operator; void returns no value.
3 Match decorator types
| Term | Meaning |
|---|---|
Sınıf decorator'u |
Takes the constructor function |
Metot decorator'u |
Takes target, key, descriptor |
Property decorator'u |
Takes target, key |
Decorator fabrikası |
A function returning a decorator |