jquery - 如何使用 TypeScript/jQuery 传递元素

Question

我正在尝试通过 TypeScript/JQuery 计算出 DOM 元素的位置和高度/宽度。在使用 TypeScript 之前，我只是做了这样的事情:

        function ActOnClick(itemClicked, loadPath) {
            //sample code
            var v1 = itemClicked.offset();
            var v2 = itemClicked.width();
            var v3 = itemClicked.height();

        };

        $(document).ready(function () {

            $("#idCRM").click(function () {
                ActOnClick($("#idCRM"), "/Widgets/GetCRM");
            });
}

其中 idCRM 是我的 cshtml 文档中的“部分”(但它可以是任何 div 等)

现在我正尝试将此代码移至 TypeScript，但我希望 ActOnClick 函数中的什么类型来自 jQuery 的 $("#idCRM")？现在我选择“元素”，但 a) 它不公开宽度、高度等，并且 b) ActOnClick 调用失败，原因是 $("#idCRM")!

/// <reference path="../../ScriptsTS/jquery.d.ts" />
function ActOnClick(itemClicked: Element, loadPath: string) {

    var v1 = itemClicked.offset();  <-- FAILS
    var v2 = itemClicked.width();   <-- FAILS
    var v3 = itemClicked.height();  <-- FAILS

};

$(document).ready(function () {

    $("#idCRM").click(function () {
        ActOnClick($("#idCRM"), "/Widgets/GetCRM");  <-- FAILS
    });
}

Answer 1

如果你需要代码正常工作，你总是可以使用 Any typescript 类型，比如:

function ActOnClick(itemClicked: Any, loadPath: string) {
  var v1 = itemClicked.offset();
  var v2 = itemClicked.width();
  var v3 = itemClicked.height();
};

Typescript 基本上关闭了 Any 变量，它不会发出任何错误或警告。但是，$("#idCRM") 应该返回一个实现 JQuery 接口(interface)的对象，该接口(interface)在 jquery.d.ts 中定义，因此您实际上应该使用:

function ActOnClick(itemClicked: JQuery, loadPath: string) {
  var v1 = itemClicked.offset();
  var v2 = itemClicked.width();
  var v3 = itemClicked.height();
};

offset()、width() 和 height() 方法在该接口(interface)上定义，它们返回 Object 、number 和 number。