After developing my own typescript decorator for Component and Inject, the code structure is as follows:
@Component(myModule, {
selector: 'selector',
templateUrl: 'template.html',
bindings: {
value: '=',
},
})
@Inject('service')
export class ComponentController {
value: string;
constructor(private service: Service) {}
}
The implementation of the decorators is shown below:
export const Component = function(moduleOrName: string | ng.IModule, options: any): Function {
return (controller: Function) => {
let module = typeof moduleOrName === 'string' ? angular.module(moduleOrName) : moduleOrName;
let component = angular.extend(options, { controller });
module.component(options.selector, component);
};
};
export const Inject = function(...injections: string[]): Function {
return (target: Function) => {
target.$inject = injections;
return target;
};
};
Having succeeded with this setup, I attempted to replicate the process for a directive involving either the compile or link functions but encountered difficulties.
@Directive(app, {
selector: 'selector',
templateUrl: 'template.html',
scope: {
value: '=',
},
})
@Inject('service')
export class myDirective implements ng.IDirective {
value: string;
constructor(private service: Service) {}
compile(element: ng.IAugmentedJQuery) {
return this.service.compile(element);
}
}
The logic behind the Directive decorator is illustrated through the snippet below:
export const Directive = function(moduleOrName: string | ng.IModule, options: any): Function {
return (directive: Function) => {
let module = typeof moduleOrName === 'string' ? angular.module(moduleOrName) : moduleOrName;
let prueba = angular.extend(options, { directive })
module.directive(options.selector, prueba);
};
};
Regrettably, upon attempting to create the directive, an error within the Angular library surfaced, displaying the message:
Argument 'fn' is not a function, got Object
Considering these challenges, should this approach be pursued further using decorators, or would resorting to conventional methods be more prudent?
Your insights are greatly appreciated.