Having encountered an issue with my two decorators, I noticed that only the first decorator defined is executing its setter/getter properties when attached to a property. The inner function itself triggers both `Init Decorator 1` and `Init Decorator 2`. What could be causing the second decorator to not execute its setter/getter?
Below are how the two decorators are defined:
export function Decorator1(): any {
return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
descriptor = descriptor || {};
console.log('Init Decorator 1');
descriptor.get = function (this: any) { console.log('Get Decorator 1'); }
descriptor.set = function (this: any) { console.log('Set Decorator 1'); }
return descriptor;
}
}
export function Decorator2(): any {
return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
descriptor = descriptor || {};
console.log('Init Decorator 2');
descriptor.get = function (this: any) { console.log('Get Decorator 2'); }
descriptor.set = function (this: any) { console.log('Set Decorator 2'); }
return descriptor;
}
}
The decorators are used as shown below:
export class Test {
@Decorator1()
@Decorator2()
code = '';
constructor() {
setTimeout(() => this.code = '123', 2000);
}
}
new Test();
[LOG]: "Init Decorator 2"
[LOG]: "Init Decorator 1"
[LOG]: "Set Decorator 1"
[LOG]: "Set Decorator 1"