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

Question

出于测试目的，我必须模拟window.addEventListener（用一个开玩笑的空模拟就足以窥探）。所以我这样做：

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

问题是，当我做window.addEventListener.mockClear()打字稿抱怨该方法不存在时。

应对此问题的最佳方法是什么？

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

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

Answer 1

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

但是你可以覆盖这些方法。有一种方法可以避免始终编写类型转换：您可以根据需要定义自己的MockWindow界面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 Mock<T> extends Function {
    ...
    (...args: any[]): any;

任何声明为jest.Mock的内容都可以使用任意数量的参数进行调用，并且会使& typeof window.addEventListener类型addEventListener无需添加。

更新：事实证明，打字稿足够富有表现力，因此你可以编写通用的类型检查函数：

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" | ...