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

Question

出于测试目的，我必须模拟 window.addEventListener(开个 Jest ，空模拟就足以监视)。所以我这样做:

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