TypeScript
Method decorator
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.
Exercise 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.
Show example 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));
Test yourself
-
Which three arguments does a method decorator take?
- (target, propertyKey)
- (constructor, args)
- (instance, key, value)
- (target, propertyKey, descriptor)
Show answer
(target, propertyKey, descriptor) — 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.
-
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);
};
}
Show answer
function LogMethod(target: any, key: string, descriptor: PropertyDescriptor): void {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
return original.apply(this, args);
};
}
-
Method decorator parts
- target
- The class prototype
- propertyKey
- The method name
- descriptor
- The method definition object
- descriptor.value
- The method function itself
Next lesson: Property decorator
