CODEWITHSUNDEEP
jquery-uitypescript
MiMo
MiMo

Reputation: 11973

jQuery UI widgets in TypeScript

I am using a jQuery UI slider in a TypeScript application, using TypeScript 0.9 and the latest jqueryui.d.ts definition file downloaded from DefinitelyTyped:

/// <reference path="jquery/jquery.d.ts" />
/// <reference path="jqueryui/jqueryui.d.ts" />

. . .

$("#sideRestitution").slider({
  min: 0.0,
  max: 1.0,
  step: 0.01,
  value: game.sideRestitution,
  change: (event, ui) => {
    game.sideRestitution = ui.value;
  }
});

It works fine, but I cannot figure out how to use the widget in a 'typed' way: in the above code change is of type any. jqueryui.d.ts defines a Slider interface with the events and methods specific to the slider widget, but the only method or property returning such an interface is the global $.ui.slider.

How do I access / use the Slider interface for a slider widget I created?

What is the use/purpose of $.ui.slider?

Upvotes: 2

Views: 4628

Answers (2)

MiMo
MiMo

Reputation: 11973

With the current version of jqueryui.d.ts there is no way to define the widget events in a 'typed` way.

The globals $.ui.slider, $.ui.accordion etc. are used as base to define new widgets - e.g:

$.widget("ui.myslider", $.ui.slider, { . . . });

creates a new myslider widget that extends the built-in slider widget. These globals are used also to access the prototype of each widget, for example to modify their default options:

$.ui.slider.prototyp.options.min = -100;

modifies the default minimum value of all sliders to be -100.

The definition of these globals in jqueryui.d.ts appears to be wrong: it does not define prototype and instead defines a number of other members - like all the options - that are actually not there.

Upvotes: 1

Charles Marsh
Charles Marsh

Reputation: 1917

You also need to include jquery.d.ts in order to access and manipulate typed jQuery objects. This will allow you to access your slider in the typical jQuery way. For example:

/* Initialize slider with ID 'my_slider'. */
$("#my_slider").slider({
    min: 0,
    max: 100,
    value: 0,
    change: (event: Event, ui) => {   
        /* Update as desired. */
    }
});

In this example, the type for $('#my_slider') is defined in jquery.d.ts, and all the relevant slider functions and such are defined in jqueryui.d.ts.

Just to finish off the example, in your HTML, you'll want something like:

<div id="my_slider"></div>

EDIT: I think this is a bug. Even with the following:

var my_slider : JQueryUI.Slider = $('#my_slider').slider;
my_slider.slide({
  ...
})

It still doesn't register the type information for slide.

Here's a hack-ish fix. Replace the SliderUIParams interface (line 442 in jqueryui.d.ts) with an actual interface:

interface SliderUIParams {
  value: number;
  values?: number[];
  handle: JQuery;
}

Then, in your slider call, statically type your arugments, e.g.:

slide: (event: Event, ui: JQueryUI.SliderUIParams) => {
  ...
}

Upvotes: 1

Related Questions