CODEWITHSUNDEEP
signalrtypescript
iLemming
iLemming

Reputation: 36204

SignalR typescripf declaration file

I've started using typescript, easily found declaration (d.ts) files for angular.js and jquery. Can't find one for SignalR jquery though.

Can you guys help me. I could just create an interface that extends JQuery but somehow it's not working...

var hub = $.connection.myHub

it's complaining about connection thing... says "The property 'connection' doesn't exist on value of type 'JQueryStatic'"

Upvotes: 12

Views: 10300

Answers (5)

howardlo
howardlo

Reputation: 1459

It's not ideal but if you need to move pure signalR javascript to Typescript quickly you can use an interface like this (you'll still need to include signalr.d.ts type definition).

interface SignalR {
    messageHub: any;
}

var chat = $.connection.messageHub;
chat.client.actionMessage = function (data) {
    console.info("actionMessage: received: message: " + data.message);
};

Upvotes: 0

George Mavritsakis
George Mavritsakis

Reputation: 7083

DefinitelyTyped has a complete TypeScript definition for SignalR.

Just updated the link, thanks Stuart

Upvotes: 16

Murat G.
Murat G.

Reputation: 181

[Self-plug]

I have created a tool to generate TypeScript declaration files for your hubs, methods and the types you pass between the client and the server. It includes the latest DefinitelyTyped signalr.d.ts file as well. I released an alpha version as a nuget package: SignalR.TypeScript. To install this package, run the following command in the Package Manager Console:

Install-Package SignalR.TypeScript -Pre

More information and how-to on my blog: http://murat.girg.in/2013/11/introducing-signalr-typescript/

[/Self-plug]

Upvotes: 3

Slawek
Slawek

Reputation: 2632

This is what I was able to prepare in a quick and dirty way. Be aware that its probably barely correct, but its enough for me right now, and it seems to work as intended.

It might be a nice thing to start with. Lets call it "jquery.signalR-0.5.3.d.ts":

/// <reference path="jquery.d.ts" />
interface Hub {
    id: string;
    state: any;
    start(options?: any, callback?: () => any): JQueryPromise;
}

interface SignalR {    
    log(msg: string, logging: bool): void;
    isCrossDomain(url: string): bool;
    changeState(connection: any, expectedState: number, newState: number): bool;
    isDisconnecting(connection: any): bool;

    hub: Hub;
    connection: HubConnection;

    init(url, qs, logging): void;
    ajaxDataType: string;
    logging: bool;
    reconnectDelay: number;
    state: any;
    start(options?: any, callback?: () => any): JQueryPromise;
    starting(callback?: () => any): SignalR;
    send (data): SignalR;
    sending (callback?: () => any): SignalR;
    received (callback?: (data) => any): SignalR;
    stateChanged (callback?: (data) => any): SignalR;
    error (callback?: (data) => any): SignalR;
    disconnected (callback?: () => any): SignalR;
    reconnected (callback?: () => any): SignalR;
    stop (async? : bool): SignalR;
}

interface HubConnection extends SignalR {
    hub: Hub;
}

// extend JQuery interface
interface JQueryStatic {
    signalR: SignalR;
    connection: SignalR;
}

then you might want to define contract for your hub:

/// <reference path="./jquery.signalR-0.5.3.d.ts" />

interface IMyHub extends HubConnection {
    // your methods definition here
}

// extend SignalR interface
interface SignalR {
    myHub: IMyHub;
}

Upvotes: 8

iLemming
iLemming

Reputation: 36204

Did it like that:

interface signalR extends JQueryStatic {
     connection;
}

var hub = (<signalR>$).connection.myHub

Upvotes: 2

Related Questions