jquery-ui - TypeScript 中的 jQuery UI 小部件

Question

我在 TypeScript 应用程序中使用 jQuery UI slider ，使用 TypeScript 0.9 和从 DefinelyTyped 下载的最新 jqueryui.d.ts 定义文件:

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

它工作正常，但我无法弄清楚如何以“类型化”方式使用该小部件:在上面的代码中，change 的类型是any。 jqueryui.d.ts 定义了一个 Slider 接口(interface)，其中包含特定于 slider 小部件的事件和方法，但返回此类接口(interface)的唯一方法或属性是全局 $.ui.slider。

如何访问/使用我创建的 slider 小部件的 Slider 界面？

$.ui.slider 的用途/目的是什么？

Answer 1

您还需要包含 jquery.d.ts 才能访问和操作类型化 jQuery 对象。这将允许您以典型的 jQuery 方式访问 slider 。例如:

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

在此示例中，$('#my_slider') 的类型在 jquery.d.ts 中定义，并定义了所有相关的 slider 函数等在jqueryui.d.ts中。

为了完成这个示例，在您的 HTML 中，您需要如下内容:

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

编辑:我认为这是一个错误。即使有以下内容:

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

它仍然没有注册slide的类型信息。

这是一个黑客修复。将 SliderUIParams 接口(interface)(jqueryui.d.ts 中的第 442 行)替换为实际接口(interface):

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

然后，在您的 slider 调用中，静态键入您的参数，例如:

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