具有隔离范围的Angular Typescript指令在编译时生成Typescript错误

Question

I'm using Typescript and Angular, trying to make the site more accessible by using (among other things) the accessible icon directive below from 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>';
    }
}

The Typescript compiler doesn't like the isolate scope, and gives me the following errors.

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.

I'm not sure how to give name: '@' and text:'@' a type in this structure, and I'm at a loss why TS wants a semicolon within the scope object, or a Declaration after the module.

I'm implementing the ng.IDirective interface, so I would expect it to be able to deal with an isolate scope.

Any ideas? Thanks!

For reference, here's the IDirective interface in angular.d.ts:

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

You're using : when you should be using = . These are supposed to be property initializers, not type annotations.

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