Add a decorator to an angularjs directive with typescript
<p>I created my own typescript decorator for <em>Component</em> and <em>Inject</em> and it looks like this</p>

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

  constructor(private service: Service) {}
}
</code></pre>

<p>Where the decorators code is</p>

<pre><code>export const Component = function(moduleOrName: string | ng.IModule, options: any): Function {
  return (controller: Function) =&gt; {
    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) =&gt; {
    target.$inject = injections;
    return target;
  };
};
</code></pre>

<p>It works fine and now I want to do the same thing for a directive where I would need to use <strong>compile</strong> or <strong>link</strong> functions but I can't make it work</p>

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

<p>The code of the <strong>Directive</strong> decorator is</p>

<pre><code>export const Directive = function(moduleOrName: string | ng.IModule, options: any): Function {
  return (directive: Function) =&gt; {
    let module = typeof moduleOrName === 'string' ? angular.module(moduleOrName) : moduleOrName;
    let prueba = angular.extend(options, { directive })
    module.directive(options.selector, prueba);
  };
};
</code></pre>

<p>And when I create the directive, it always shows this error in the angular library</p>

<blockquote>
  <p>Argument 'fn' is not a function, got Object</p>
</blockquote>

<p>It could be done with a decorator or should I forget it and do it the usual way?</p>

<p>Thanks.</p>