javascript - 覆盖Typescript声明类型以从DOM声明Event类上的静态方法

在用Javascript编写的Web应用程序中，我允许自己使用以下代码通过添加“静态方法”（由于使用了非常近似的描述，因此使用了引号，因为它是一个非常近似的描述）来从DOM中“增强” Event“类”。

Event.stop = function(event) {
    if(event) {
        event.stopPropagation();
        event.preventDefault();
    }
};

这很好。这是一个例子：

document.getElementById('xxx').addEventListener('click', event => Event.stop(event));

Visual Studio Code是我最喜欢的编辑器，并且我广泛使用嵌入式Typescript类型检查器。它使用以下错误标记上面的示例：

Property 'stop' does not exist on type '{ new (typeArg: string, eventInitDict?: EventInit): Event; prototype: Event; readonly AT_TARGET: ...'.

这是完全正确的，因为在普通Javascript中Event上没有“停止”属性。

然后，我创建了一个自定义的Typescript类型声明文件xxx.d.ts，以向Typescript声明此“ stop”属性。

我尝试了以下方法，但没有一个起作用：

interface EventConstructor {
    stop(event: Event);
}

要么：

interface Event {
    stop(event: Event);
    static stop(event: Event);
}

乃至：

var Event: {
    stop(event: Event);
};

向Typescript声明“停止”功能的正确方法是什么？

有关信息，这是来自Event的lib.dom.d.ts声明：

interface Event {
    readonly bubbles: boolean;
    cancelBubble: boolean;
    readonly cancelable: boolean;
    readonly composed: boolean;
    readonly currentTarget: EventTarget | null;
    readonly defaultPrevented: boolean;
    readonly eventPhase: number;
    readonly isTrusted: boolean;
    returnValue: boolean;
    readonly srcElement: Element | null;
    readonly target: EventTarget | null;
    readonly timeStamp: number;
    readonly type: string;
    deepPath(): EventTarget[];
    initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void;
    preventDefault(): void;
    stopImmediatePropagation(): void;
    stopPropagation(): void;
    readonly AT_TARGET: number;
    readonly BUBBLING_PHASE: number;
    readonly CAPTURING_PHASE: number;
    readonly NONE: number;
}
declare var Event: {
    prototype: Event;
    new(typeArg: string, eventInitDict?: EventInit): Event;
    readonly AT_TARGET: number;
    readonly BUBBLING_PHASE: number;
    readonly CAPTURING_PHASE: number;
    readonly NONE: number;
};

最佳答案

不幸的是，无法根据Event当前定义的外观来执行此操作。

例如，我们可以针对Array执行此操作，因为Array被声明为类型为ArrayContructor的变量。

interface ArrayConstructor {
    ...
}

declare const Array: ArrayConstructor;

因此，当我们想向数组添加静态方法时，我们可以利用接口的合并行为。由于ArrayConstructor是一个接口，我们可以重新声明它，添加一个额外的成员，并且打字稿将合并ArrayConstructor的两个声明，从而更改Array的有效类型

对于Event变量的类型是内联声明的，我们不能使用相同的方法，因为没有要合并的接口，也不能合并变量的类型：

declare var Event: {
    prototype: Event;
    new(typeArg: string, eventInitDict?: EventInit): Event;
    ...
};

关于javascript - 覆盖Typescript声明类型以从DOM声明Event类上的静态方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51386266/