Question

I’m using TypeScript and SignalR together, and am trying to define static types for the generated SignalR classes. And if I do something like this, it works:

///<reference path="../Scripts/jquery-1.8.d.ts" />
///<reference path="../Scripts/signalr-1.0.d.ts" />

interface SignalR {
    roomHub: Service.RoomHub;
}

module Service {
        export var roomHub = $.connection.roomHub;
        export interface RoomHub { }
}

And of course $.connection is of type SignalR, which is defined in the file “signalr-1.0.d.ts”, and extended in the file above.

However, I need to be able to reference the Service module from other files, so I need to add the “export” keywords to both the module and the interface, i.e.:

///<reference path="../Scripts/jquery-1.8.d.ts" />
///<reference path="../Scripts/signalr-1.0.d.ts" />

export interface SignalR {
    roomHub: Service.RoomHub;
}

export module Service {
    // Error here: "The property 'roomHub' does not exist on type SignalR."
    export var roomHub = $.connection.roomHub;
    export interface RoomHub { }
}

However, when I do that, I get a little red squiggly line under $.connection.roomHub, and the compiler returns the error, “The property ‘roomHub’ does not exist on type SignalR.”

I certainly don’t understand everything about TypeScript, but that doesn’t seem right to me. Have I run into a compiler bug? Or is there a different way to do this?

Answer 1

I was able to figure out a workaround. I pulled out the interfaces into a separate file:

// File: ISignalR.ts
interface SignalR {
    roomHub: RoomHub;
}

interface RoomHub {
}

And then I referenced that file in my Service file

///<reference path="../Scripts/jquery-1.8.d.ts" />
///<reference path="../Scripts/signalr-1.0.d.ts" />
///<reference path="ISignalR.ts" />

export module Service {
    export var roomHub = $.connection.roomHub;
}

And that works, oddly enough. I’m not sure if it’s a compiler bug, or something I’m continuing to misunderstand, but it clearly has something to do with some subtle semantic changes related to the AMD module support. I’d love to hear more of an explanation from someone who groks TypeScript and/or RequireJS modules a little better than I do.