typescript - 通过 event.type 处理鼠标事件和触摸事件

Question

我有一个通用处理程序函数，它接受一个事件，可以是鼠标事件或触摸事件。然后它将逻辑委托(delegate)给适当的函数。不过，Typescript 会抛出错误，因为显然 mouseEvent !== touchEvent。

function handleStopDrag(e: MouseEvent | TouchEvent) {
    switch (e.type) {
        case 'mouseup':
            // Error: Argument of type 'MouseEvent | TouchEvent' is not assignable to parameter of type 'MouseEvent'.
            handleMouseUp(e)
            break
        case 'touchcancel':
        case 'touchend':
            // Error: Argument of type 'MouseEvent | TouchEvent' is not assignable to parameter of type 'TouchEvent'.
            handleTouchEnd(e)
            break
    }
}

function handleMouseUp(e: MouseEvent){ ... }
function handleTouchEnd(e: TouchEvent) { ... }

如何根据我上面的检查来声明事件类型是特定类型？或者是否有更好的方法来格式化我的代码以指定事件类型？

Answer 1

您需要使用 type guard启用 TypeScript 来缩小 MouseEvent | TouchEvent联合类型为 MouseEvent或 TouchEvent键入而不必求助于类型断言( <MouseEvent> e 或 e as MouseEvent ):

• 使用类型谓词:

function isMouseEvent(e: MouseEvent | TouchEvent): e is MouseEvent {
    return e.type === 'mouseup'; // || e.type === 'click'...
}

然后像这样使用它

if (isMouseEvent(e)) {
    switch (e.type) {
        case 'mouseup':
            handleMouseUp(e);
            break;
} else (isTouchEvent(e)) {
    switch (e.type) {
        case 'touchcancel':
        case 'touchend':
            handleTouchEnd(e);
            break;
}

• 与 instanceof :

if (e instanceof MouseEvent) {
    // switch specific MouseEvent type here or inside another delegator
    handleMouseEvent(e);
} else if (e instanceof TouchEvent) {
    handleTouchEvent(e);
}