Angular 带隔离作用域的 Typescript 指令在编译时生成 Typescript 错误

Question

我正在使用 Typescript 和 Angular，试图通过使用（除其他外）下面来自 here.

的可访问图标指令使网站更易于访问

module app.directives {
    export class AccessibleIconDirective implements ng.IDirective {
        priority = 0;
        restrict = 'E';
        scope: { name: '@', text: '@'};
        template: '<i class="fa fa-{{name}}"></i><span class="invisible">{{text}}</span>';
    }
}

Typescript 编译器不喜欢隔离作用域，并给我以下错误。

accessibleIcon.ts(5,24): error TS1110: Type expected.
accessibleIcon.ts(5,27): error TS1005: ';' expected.
accessibleIcon.ts(5,35): error TS1110: Type expected.
accessibleIcon.ts(8,1): error TS1128: Declaration or statement expected.

我不确定如何在这个结构中给 name: '@' 和 text:'@' 一个类型，我不知道为什么 TS 想要在范围对象中有一个分号，或者一个声明在模块之后。

我正在实现 ng.IDirective 接口，因此我希望它能够处理隔离范围。

有什么想法吗？谢谢！

作为参考，这里是 angular.d.ts 中的 IDirective 接口：

interface IDirective {
    compile?: IDirectiveCompileFn;
    controller?: any;
    controllerAs?: string;
    bindToController?: boolean|Object;
    link?: IDirectiveLinkFn | IDirectivePrePost;
    name?: string;
    priority?: number;
    replace?: boolean;
    require?: any;
    restrict?: string;
    scope?: any;
    template?: any;
    templateNamespace?: string;
    templateUrl?: any;
    terminal?: boolean;
    transclude?: any;
}

Answer 1

当您应该使用 = 时，您却使用了 :。这些应该是属性初始值设定项，而不是类型注释。

module app.directives {
    export class AccessibleIconDirective implements ng.IDirective {
        priority = 0;
        restrict = 'E';
        // fixed
        scope = { name: '@', text: '@'};
        // fixed
        template = '<i class="fa fa-{{name}}"></i><span class="invisible">{{text}}</span>';
    }
}

Angular 带隔离作用域的 Typescript 指令在编译时生成 Typescript 错误

Angular Typescript Directive with Isolate Scope generates Typescript errors on compile

angularjs

typescript

isolate-scope