I'm having two decorators. A class decorator and a method decorator. The class decorator defines metadata which I want to access in the method decorator.
ClassDecorator:
function ClassDecorator(topic?: string): ClassDecorator {
return (target) => {
Reflect.defineMetadata('topic', topic, target);
// I've also tried target.prototype instead of target
return target;
};
}
MethodDecorator:
interface methodDecoratorOptions {
cmd: string
}
function MethodDecorator(options: decoratorOptions) {
return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
// HERE IS MY PROBLEM
console.log('metaData is: ', Reflect.getMetadata('topic', target));
}
}
And this is my Class definition:
@ClassDecorator('auth')
export class LoginClass {
@MethodDecorator({
cmd: 'login'
})
myMethod() {
console.log('METHOD CALLED');
}
}
THE PROBLEM:
The following line of the MethodDecorator returns metaData is: undefined
. Why is it undefined?
console.log('metaData is: ', Reflect.getMetadata('topic', target));
THE QUESTION:
How can I access the metadata defined by the ClassDecorator from the MethodDecorator?
Class Decorators The class decorator is applied to the constructor of the class and can be used to observe, modify, or replace a class definition.
Using Decorator Syntax In TypeScript, you can create decorators using the special syntax @expression , where expression is a function that will be called automatically during runtime with details about the target of the decorator. The target of a decorator depends on where you add them.
Metadata is used to decorate a class so that it can configure the expected behavior of the class. Following are the different parts for metadata. Annotations − These are decorators at the class level. This is an array and an example having both the @Component and @Routes decorator.
Class Decorators A class decorator is applied to the constructor of the class. A class decorator can be used to observe, modify, or replace a class definition. If the class decorator returns a value, it will replace the class declaration with the given constructor function.
The problem is the order in which decorators get executed. Method decorators are executed first, class decorators are executed after. This makes sense if you think about it, the class decorators need the complete class to act upon, and creating the class involves creating the methods and calling their decorators first.
A simple workaround would be for the method decorator to register a callback that would then be called by the class decorator after the topic was set:
function ClassDecorator(topic?: string): ClassDecorator {
return (target) => {
Reflect.defineMetadata('topic', topic, target.prototype);
let topicFns: Array<() => void> = Reflect.getMetadata("topicCallbacks", target.prototype);
if (topicFns) {
topicFns.forEach(fn => fn());
}
return target;
};
}
interface methodDecoratorOptions {
cmd: string
}
function MethodDecorator(options: methodDecoratorOptions) {
return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
let topicFns: Array<() => void> = Reflect.getMetadata("topicCallbacks", target);
if (!topicFns) {
Reflect.defineMetadata("topicCallbacks", topicFns = [], target);
}
topicFns.push(() => {
console.log('metaData is: ', Reflect.getMetadata('topic', target));
});
}
}
@ClassDecorator('auth')
class LoginClass {
@MethodDecorator({
cmd: 'login'
})
myMethod() {
console.log('METHOD CALLED');
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With