Search code examples
angularjstypescriptangular-directive

Updated my Typescript definitions, broke angular directive

I just updated my Typescript definitions to the latest available today. In angular.d.ts, this is now the definition of scope from the IDirective interface:

interface IDirective {
    ...
    scope?: boolean | {[boundProperty: string]: string};
    ...
}

My directive is defined as such (with letters in place of the actual names and irrelevant code omitted):

export class MyDirective implements angular.IDirective {
    scope = {
        a: "&",
        b: "@?",
        c: "=?",
        d: "=?",
        e: "@?",
    }
}

I'm getting this compile-time error:

Error Class 'MyDirective' incorrectly implements interface 'IDirective'. Types of property 'scope' are incompatible.

Type '{ a: string; b: string; c: string; d: string; e: string; }' is not assignable to type 'boolean | { [boundProperty: string]: string; }'.

Type '{ a: string; b: string; c: string; d: string; e: string; }' is not assignable to type '{ [boundProperty: string]: string; }'.

Index signature is missing in type '{ a: string; b: string; c: string; d: string; e: string; }'.

I don't understand why I'm getting this. Each of the properties is a string, which is what the { [boundProperty: string]: string; } part wants, isn't it?

How do I change my scope definition to fit with the updated definition?

Solution

  • I tried your code and it transpiles fine. I would close and restart whatever IDE you're using and see if this error goes away; that seems to work quite frequently for me as a Visual Studio user when TypeScript errors don't make sense.

    If that doesn't work, make sure you have your version of the TypeScript compiler updated to the most recent version.

    I know it's not the latest but this is the typing I'm using: registry:dt/angular#1.5.0+20161101124950 And my version of TypeScript: 2.1.5.0