Angular Typescript Directive with Isolate Scope generates Typescript errors on compile

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