typescript - 如何在 Typescript 中重新定义 window.addEventListener 的类型？

Question

出于测试目的，我必须模拟 window.addEventListener (开 Jest ，空模拟足以进行 spy 事件)。所以我这样做是这样的:

window.addEventListener = jest.fn();
window.removeEventListener = jest.fn();

问题是，当我执行 window.addEventListener.mockClear() 时， typescript 提示该方法不存在。

解决这个问题的最佳方法是什么？

解决方法:目前我正在这样做，但我不喜欢一直这样做

(window.addEventListener as jest.Mock<{}>).mockClear();
(window.addEventListener as jest.Mock<{}>).mockClear();

Answer 1

我认为不可能扩充现有接口(interface)来向该接口(interface)中声明的方法添加一些属性。

但是您可以重写这些方法。有一种方法可以避免一直编写类型转换:您可以定义自己的 MockWindow 接口(interface)，并根据需要键入 addEventListener 和 removeEventListener 。然后，您可以将真实的 window 对象强制转换为 MockWindow 一次，然后使用它:

interface MockWindow extends Window {
    addEventListener: jest.Mock<{}> & typeof window.addEventListener;
    removeEventListener: jest.Mock<{}> & typeof window.removeEventListener;
}

function mockWindow() {
    window.addEventListener = jest.fn();
    window.removeEventListener = jest.fn();
    return window as MockWindow;
}

let w = mockWindow();


w.addEventListener('load',function() {});
w.addEventListener.mockClear();  

实际上，因为在当前版本的 jest Typings 中，jest.Mock 接口(interface)已经具有非常宽松的调用签名

interface Mock<T> extends Function {
    ...
    (...args: any[]): any;

任何声明为jest.Mock的东西都可以使用任意数量的任意参数来调用，并且它使得将& typeof window.addEventListener添加到addEventListener的类型中 不必要。

更新:事实证明 typescript 具有足够的表达能力，因此您可以编写通用的、类型检查的函数:

function mockMethods<T, MethodName extends keyof T>(o: T, methodNames:MethodName[])
: T & {[K in MethodName]: T[K] & jest.Mock<{}>} {
    methodNames.forEach(k => {
       o[k] = jest.fn() as any;
    });
    return o as any; // typescript doesn't allow this cast: 
                     // as (T & {[K in MethodKeys]: T[K] & jest.Mock<{}>});
}

let w = mockMethods(window, ['addEventListener', 'removeEventListener']);

w.addEventListener('load', function() {});
w.addEventListener.mockClear();

// you can still call other window methods
w.alert('x');

// and their types are unaffected
w.alert.mockClear(); // error: Property 'mockClear' does not exist 
                     // on type '(message?: any) => void'.

// and you can't mock non-existent methods
let u = mockMethods(window, ['z']); // error: Argument of type '"z"[]'  
                     //  is not assignable to parameter of type '("blur" | ...