Isolate scope in Directive with TypeScript and Angular 1

Question

I am stuck on an issue when trying to create a new angular directive using TypeScript. The issue only happens if I am planning to use the isolate scope in the directive. Following is what I am doing:

module Foo.Layout {
    "use strict";
    class SidebarDirective implements ng.IDirective {

        templateUrl = "/layout/sidebar/sidebar.html";
        restrict = "E";
        controller = SidebarController;
        scope = {
            align: "@"
        }

        static factory() {
            var instance = () => {
                return new SidebarDirective();
            }
            return instance;
        }       
    }
    angular.module("app.layout").directive("fooSidebar", SidebarDirective.factory());
}

The issue only happens when adding the scope = {...} statement else it compiles fine. Below goes the error.

Error TS2420 Class 'SidebarDirective' incorrectly implements interface 'IDirective'. Types of property 'scope' are incompatible. Type '{ orientation: string; }' is not assignable to type 'boolean | { [boundProperty: string]: string; }'. Index signature is missing in type '{ orientation: string; }'

And yes in my typings ng.IDirective has the scope property of type scope?: boolean | {[boundProperty: string]: string};

What is the ideal way to create an isolate scope in my directive? (I am using the angularjs.TypeScript.DefinitelyTyped version 6.5.5)

Answer 1

Have you tried with

scope = {
            align: "="
        }