使用打字稿向 angularjs 指令添加装饰器

Question

我为 Component 和 Inject 创建了自己的打字稿装饰器，它看起来像这样

@Component(myModule, {
  selector: 'selector',
  templateUrl: 'template.html',
  bindings: {
    value: '=',
  },
})
@Inject('service')
export class ComponentController {
  value: string;

  constructor(private service: Service) {}
}

装饰器代码在哪里

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;
  };
};

它工作正常，现在我想对需要使用 compile 或 link[= 的指令做同样的事情37=] 功能，但我无法使其工作

@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);
  }
}

指令装饰器的代码是

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);
  };
};

当我创建指令时，它总是在 angular 库中显示此错误

Argument 'fn' is not a function, got Object

它可以用装饰器来完成，还是我应该忘记它并按照通常的方式来完成？

谢谢。

Answer 1

应该是

export const Directive = function(moduleOrName: string | ng.IModule, selector: string): Function {
    return (directive: any) => {
        let module = typeof moduleOrName === 'string' ? angular.module(moduleOrName) : moduleOrName;
        let factory = (...args: any[]) => {
            let options = {
                controller: function () {},
            };
            return angular.extend(new directive(...args), options);
        };
        factory.$inject = directive.$inject;
        module.directive(selector, factory);
    };
};

@Directive(app, 'selector')
@Inject('service')
export class MyDirective implements ng.IDirective {
    templateUrl = 'template.html';
    scope = {
        value: '=',
    };
    constructor(private service: Service) {}
    compile = function(element: ng.IAugmentedJQuery) {
        return this.service.compile(element);
    }
}