TypeScript
Summary - Decorators
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);
};
};
}
Exercise 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.
Show example 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));
Test yourself
-
Which decorator type is used to change a method's behavior?
- A method decorator
- A class decorator
- A property decorator
- Only a factory
Show answer
A method decorator — 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.
-
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);
};
};
}
Show answer
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);
};
};
}
-
Match decorator types
- 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
Next lesson: export and import
