如何在TypeScript中实现ng.IDirectiveFactory

Question

我最近更新了我的typescript项目中的angular.d.ts文件.我现在在指令定义中得到一个打字稿编译错误.我在更新的angular.d.ts文件中注意到以下内容:

interface IDirectiveFactory {
    (...args: any[]): IDirective;
}

我试图找出如何实现此接口.

我得到这个编译错误:类型ng.DirectiveFactory需要一个调用签名,但类型"MyDirective"缺少.

这就是我的指令现在看起来的样子(以前使用较旧的angular.d.ts文件可以正常工作):

class MyDirective{
    constructor() {
        var directive: ng.IDirective = <ng.IDirective>{};
        directive.priority = 0;
        directive.restrict = "E";
        directive.scope = {...};
        directive.template = '<div></div>';
        directive.link = {...}
        return directive;
    }
}

这是我用angular注册MyDirective类的地方:

angular.module("MyModule", [])
        .directive('myDirective', MyDirective);

上面的编译器错误很有意义,但是如何实现(... args:any []):IDirective签名)？

提前致谢

Answer 1

我知道这是一个老问题,但我也遇到了这个问题,并认为我会分享我的解决方案:

class MyDirective implements ng.IDirective {
    priority = 0;
    restrict = 'E';
    scope = {...};
    template = '<div></div>';

    link(scope: ng.IScope
        , element: ng.IAugmentedJQuery
        , attributes: IAttributes
        , controller: any
        , transclude: ng.ITranscludeFunction) {
        ...
    }
}

angular.module("MyModule", [])
    .directive('myDirective', () => new MyDirective());

我喜欢这个解决方案,因为它允许您使用TypeScript类的全部好处.

更新 如果要使用此方法使用私有类函数或字段来简化链接函数,则需要稍微不同地定义链接函数:

class MyDirective implements ng.IDirective {
    priority = 0;
    restrict = 'E';
    scope = {...};
    template = '<div></div>';

    link = (scope: ng.IScope
        , element: ng.IAugmentedJQuery
        , attributes: IAttributes
        , controller: any
        , transclude: ng.ITranscludeFunction) => {
        ...
    }
}

angular.module("MyModule", [])
    .directive('myDirective', () => new MyDirective());

(注意,链接方法在这里被声明为胖箭头函数而不是类函数)

这是因为当Angular将其连接起来时,它会以不保留this类的引用的方式进行连接.通过使用胖箭头函数定义它,编译的JavaScript将以保留this引用的方式定义函数.否则,在尝试运行代码时会出现很多错误.

Answer 2

过去的旧签名directive()......

directive(name: string, directiveFactory: Function): IModule;

将一个类用作一个类是合法的Function.但是这个提交将签名改为:

directive(name: string, directiveFactory: IDirectiveFactory): IModule;

IDirectiveFactory是一个返回an的函数IDirective,因此directive()不再接受directiveFactory参数的类.把它改成......

function MyDirective () : ng.IDirective {
    var directive: ng.IDirective = <ng.IDirective>{};
    directive.priority = 0;
    directive.restrict = "E";
    directive.scope = {};
    directive.template = '<div></div>';
    return directive;
}

angular.module("MyModule", [])
    .directive('myDirective', MyDirective);