Method decorator
- TypeScript course
- Intermediate
- Lesson 45/89
- 4 min
Learn to write method decorators.
Method decorator
A method decorator is written right above a method declaration and takes three arguments: (target, propertyKey, descriptor). target is the class prototype, propertyKey is the method name, and descriptor is the object holding the method definition. By modifying the descriptor you can change the method's behavior.
function LogMethod(
target: any,
key: string,
descriptor: PropertyDescriptor
) {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log("çağrıldı");
return original.apply(this, args);
};
}descriptor.value
descriptor.value holds the method function itself. If you save the original function in a variable and replace descriptor.value with a new function, the new function runs whenever the method is called. You can call the original from inside via original.apply(this, args); this lets you add logging while keeping the old behavior.
Practice Log a method call
Write the LogMethod decorator taking (target: any, key: string, descriptor: PropertyDescriptor). In the body, assign descriptor.value to original; replace descriptor.value with a function that prints console.log("ç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, apply LogMethod manually, write it back with Object.defineProperty. Add 2 and 3 by calling the addition method on a Hesap instance and print the result.
Starter code
// LogMethod decorator'unu yaz: target, key, descriptor alır
// 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
// LogMethod'u elle uygula, Object.defineProperty ile geri yaz
// Hesap örneği üzerinde toplama metoduyla 2 ve 3'ü topla, sonucu yazdırSample solution
function LogMethod(target: any, key: string, descriptor: PropertyDescriptor): void {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log("ç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")!;
LogMethod(Hesap.prototype, "topla", desc);
Object.defineProperty(Hesap.prototype, "topla", desc);
console.log(new Hesap().topla(2, 3));Expected output
çağrıldı 5
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which three arguments does a method decorator take?
- (target, propertyKey)
- (constructor, args)
- (instance, key, value)
- (target, propertyKey, descriptor) Correct answer
Explanation: A method decorator takes three arguments: target (prototype), propertyKey (method name), and descriptor (method definition object). Two arguments belong to property decorators; the constructor belongs to class decorators.
2 Save the original method
function LogMethod(target: any, key: string, descriptor: PropertyDescriptor): void {
const original = ____;
descriptor.value = function(...args: any[]) {
return original.apply(this, args);
};
}function LogMethod(target: any, key: string, descriptor: PropertyDescriptor): void {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
return original.apply(this, args);
};
}Explanation: The method function lives in descriptor.value. target is the prototype, key is a string, and this depends on call context; none holds the method function directly.
3 Method decorator parts
| Term | Meaning |
|---|---|
target |
The class prototype |
propertyKey |
The method name |
descriptor |
The method definition object |
descriptor.value |
The method function itself |