title: Extending angularjs directives with Typescript
body: <pre><code>export class MyDirective extends MyLib.directives.OtherDirective implements ng.IDirective {
    public require: string[] = ["^someReq"];
    public controller: string = "MyCtrl";
    public scope = {
      position: "@"
    };
  
    public static $inject: string[] = [
      '$http',
      '$q'
    ];
    constructor(
      private $http: ng.IHttpService,
      private $q: ng.IQService
    ) {
      console.log(this);  // undefined ??
      super($http: $http, $q: $q) // fails
    }
  
  }
  
  app.directive('myDirective', function (): ng.IDirective {
    return MyDirective
  });
  </code></pre>
  
  <p>My questions is twofold here, the structure above doesn't work. (I get an error message from the super class: <code>"Cannot set property 'restrict' of undefined</code> when it tries the <code>this.restrict = "A"</code> assignment in the super class' compiled javascript).</p>
  
  <p>I cannot work out why <code>this</code> is undefined in this case, and why it doesn't work. I suspect it may be due to my misunderstanding of how the directiveFactory works. Could someone explain why this doesn't work, and possibly demonstrate how they would achieve what I'm trying to do? (I understand that most people use functions for their directives, but trying to extend a directive from a library where the directive is a class so I am not sure how to work that in.</p>
  
  <p>Edit: as a follow up- why does this work?</p>
  
  <pre><code>app.directive('myDirective', ["$http",  "$q", (
      $http: ng.IQService,
      $q: ng.IQService,
    ) =&gt; {
      return new MyDirective({$http: $http, $q: $q});
    }
  ]);
  </code></pre>
  
  <p>I Don't like it because you lose the benefits of the $inject syntax, but why does explicitly calling <code>return new</code> work here?</p>