【问题标题】:Typescript + jQuery: correct way to use event state?Typescript + jQuery:使用事件状态的正确方法?
【发布时间】:2015-07-15 03:39:45
【问题描述】:

我有一些简单的 SPA 弹出状态代码如下:

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

(使用 originalEvent 是由于这样的答案:popstate returns event.state is undefined

这给出了一个编译错误:

“事件”类型上不存在属性“状态”。

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

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

interface EventWithState extends Event {
    state: any;
}

(*我怀疑“任何”真的是我最好的选择 - 如果有人知道应该让我知道什么类型状态,更重要的是在这种情况下我如何自己找到它)

然后我像这样更改了上面的代码:

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

好的,现在可以正常工作并编译为我想要的原始代码。但这似乎是一个尴尬的解决方法。

这是可接受的方法吗?打字稿定义中是否缺少某些内容?还是我遗漏了什么。

此外,使用e.state 也不起作用,但是编辑jquery.d.ts(来自DefiniteTyped)并将state: any; 添加到BaseJQueryEventObject 以与我的解决方法类似的方式修复它。这就是让我认为关于事件状态的 typescript 定义中缺少某些内容的原因。

【问题讨论】:

标签: javascript jquery typescript1.4


【解决方案1】:

感谢 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”作为状态类型:

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

【讨论】:

    猜你喜欢
    • 2020-05-25
    • 2018-07-09
    • 2021-05-19
    • 1970-01-01
    • 2019-11-22
    • 1970-01-01
    • 2011-12-02
    • 2020-08-15
    • 2023-03-27
    相关资源
    最近更新 更多