Typescript + jQuery:使用事件状态的正确方法

Typescript + jQuery: correct way to use event state?

本文关键字：状态 方法 事件 jQuery Typescript      更新时间：2023-09-26

我有一些简单的SPA popstate代码，如下所示:

module myModule {
    $(function () {
        $(window).on("popstate", function(e) {
            if (e.originalEvent.state !== null) {
                // code removed
            }
        });
    });
}

(使用originalEvent是由于这样的答案:popstate返回事件。状态未定义)

给出一个编译错误:

属性'state'在'Event'类型上不存在。

e是JQueryEventObject类型，originalEvent是Event类型。

现在我已经设法通过定义这个接口来解决这个问题:

interface EventWithState extends Event {
    state: any;
}

(*我怀疑"any"在这里真的是我最好的选择-如果有人知道应该是什么类型状态，请告诉我，更重要的是，在这种情况下我如何为自己找到它)

我把上面的代码改成这样:

module myModule {
    $(function () {
        $(window).on("popstate", function(e) {
            if ((<EventWithState>e.originalEvent).state !== null) {
                // code removed
            }
        });
    });
}

OK，现在工作得很好，并编译成我想要的原始代码。但这似乎是一个尴尬的解决方案。

这是可以接受的方法吗?打字稿定义中是否缺少了什么?还是我错过了什么?

此外，使用e.state也不起作用，但是编辑jquery.d.ts(从DefinitelyTyped)和添加state: any;到BaseJQueryEventObject以类似的方式修复了它。这让我觉得typescript关于Event状态的定义中缺少了一些东西。

感谢Pilot分享了另一个问题的答案，虽然乍一看似乎无关，但它确实为我提供了线索和链接，让我明白我可以使用PopStateEvent而不是我自己的EventWithState。

module myModule {
    $(function () {
        $(window).on("popstate", function(e) {
            if ((<PopStateEvent>e.originalEvent).state !== null) {
                // code removed
            }
        });
    });
}
https://developer.mozilla.org/en-US/docs/Web/API/Event

https://developer.mozilla.org/en-US/docs/Web/API/PopStateEvent

对于记录，lib.d.ts确实使用"any"作为state的类型:

interface PopStateEvent extends Event {
    state: any;
    initPopStateEvent(typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, stateArg: any): void;
}

https://typescript.codeplex.com/SourceControl/latest bin/lib.d.ts

相关文章：