導出TypeScript模塊導致接口未被拾取

Question

我一起使用TypeScript和SignalR，並試圖爲生成的SignalR類定義靜態類型。如果我做這樣的事情，它的工作原理：

///<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 { } 
} 

當然$.connection並且是SignalR類型，它是在文件「signalr-1.0.d.ts」所定義，擴展文件上面的。

不過，我需要能夠引用來自其他文件Service模塊，所以我需要「出口」的關鍵字添加到模塊和接口兩種，即：

///<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 { } 
} 

然而，當我這麼做了，我在$.connection.roomHub下得到了一條紅色的波浪線，並且編譯器返回錯誤信息：「屬性'roomHub'在類型SignalR上不存在。」

我當然不明白關於TypeScript的一切，但這對我來說並不合適。我遇到了一個編譯器錯誤？還是有不同的方式來做到這一點？

Answer 1

我能弄清楚一個解決方法。我掏出接口到一個單獨的文件：

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

interface RoomHub { 
} 

然後，我引用了文件在我的服務文件

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

而且這樣的作品，奇怪的是。我不確定它是一個編譯器錯誤，還是我一直在誤解的東西，但顯然這與一些與AMD模塊支持相關的細微語義變化有關。我很樂意聽到更多的人對TypeScript和/或RequireJS模塊比我更好的解釋。

Answer 2

如果SignalR對象具有實際成員，則您希望改爲使用declare module語法。 interface聲明只描述類型的成員（而不是描述現存對象）。

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

declare module SignalR { 
    var roomHub: Service.RoomHub; 
} 

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

Answer 3

還有就是連接SignalR了不止一種方法，並使用createHubProxy和invoke更打字稿友好：

export class FrameworkHub { 

    private connection: HubConnection; 
    private proxy: HubProxy; 

    Init(): void { 
     this.Connected = false; 
     this.connection = $.hubConnection(); 
     this.connection.logging = true; 
     // Binding with createHubProxy means you can use a string name, so no need to add dynamic properties to the hub 
     this.proxy = this.connection.createHubProxy("MyHubName"); 
     this.wireEventListeners(); 
     this.initializeConnection(); 
    } 

    // Binding with proxy.on means you can use a string name for the function, so no need to add dynamic properties to the hub. 
    wireEventListeners(): void { 
     this.proxy.on("HandleFrameworkMessage", (message: IFrameworkMessage) => { 
      console.log("HandleFrameworkMessage: " + message.AccountID + " - " + message.ArmID); 
      // Do something to handle the message here. 
     }); 
    } 

    initializeConnection(): void { 
     //console.log("Framework Hub initializeConnection"); 
     var that = this; 
     //Again, using invoke means passing a string argument. 
     this.connection.start().done(() => { 
      that.proxy.invoke("Connect", this.AccountID, this.ArmID).done((response:FrameworkHubResponse) => { 
       //console.log("FHR: " + response.Success + " - " + response.Message); 
       if (response.Success) { 
        // Do something. 
       } 
       else { 
        // Try again. Would be better with some kind of exponential back-off. 
        setTimeout(that.initializeConnection, 500); 
       } 
      }); 
     }); 
    } 
} 

這是一個略顯粗糙的例子從實際的代碼切割，但我已經找到了最好的TS使用SignalR的方式。這種連接的文檔在這裏：https://github.com/SignalR/SignalR/wiki/SignalR-JS-Client-Hubs-%28No-Proxy%29 - 小心，因爲文檔並不總是跟上最近的變化。