2

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?

Improve this question

2 Answers 2

Reset to default
1

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) => {
  ...
}
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I am doing exactly what you are suggesting - but in this way change does not have a type, nor the call-back parameters event and ui, whereas jqueryui.d.ts declares both the SliderEvent interface and the change property - but I don't know how to access these declarations.
Yes, I am. As I wrote I have code exactly as you wrote - and it works - but there is no type checking (try to set change to a number: no compiler error).
Interesting. I'll investigate further. I have similar code in my project and I too have argument types any.
There actually doesn't seem like a great way to do this. If you look at the definitions file (line 442), ui is of type SliderUIParams, which is just an empty interface and isn't referenced anywhere else. So we have no type information about ui. What you could do, if you want type information about event, is declare it as of type Event. See my edit above.
Sorry, but it seems to me that you are missing my point: I know that I can add declarations in the code - but the declaration of change as a function with two parameters etc. already exists in jqueryui.d.ts, but I don't know how this declaration is supposed to be used (assuming that it has been placed there not just for fun)
|
1

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.