Manage input from either mouse or touch events based on the event type

Question

Manage input from either mouse or touch events based on the event type

I've encountered a challenge with my general handler function that processes both mouse and touch events. Despite my efforts, Typescript keeps issuing errors due to the distinction between mouseEvent and 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) { ... }

How can I effectively specify the type of event based on my conditions? Is there a more efficient way to structure my code to define the event type?

typescript

Answer 1

Answer №1

To make TypeScript narrow the union type MouseEvent | TouchEvent without type assertion, you must utilize a type guard:

Using type predicates:

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

Implementation example:

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

Using instanceof:

Example implementation:

if (e instanceof MouseEvent) {
    // handle MouseEvent case
    handleMouseEvent(e);
} else if (e instanceof TouchEvent) {
    // handle TouchEvent case
    handleTouchEvent(e);
}

Answer 2

To make TypeScript narrow the union type MouseEvent | TouchEvent without type assertion, you must utilize a type guard:

Using type predicates:

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

Implementation example:

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

Using instanceof:

Example implementation:

if (e instanceof MouseEvent) {
    // handle MouseEvent case
    handleMouseEvent(e);
} else if (e instanceof TouchEvent) {
    // handle TouchEvent case
    handleTouchEvent(e);
}

Answer 3

Answer №2

Utilizing the in operator to verify the existence of a property that is not present in both Typescript enabled the system to seamlessly handle other tasks, requiring minimal effort on my part

function dragStart(e: MouseEvent | TouchEvent) {
  if ('touches' in e) {
    state.initialX = e.touches[0].clientX - state.xOffset
    state.initialY = e.touches[0].clientY - state.yOffset
  } else {
    state.initialX = e.clientX - state.xOffset
    state.initialY = e.clientY - state.yOffset
  }

}

Answer 4

Utilizing the in operator to verify the existence of a property that is not present in both Typescript enabled the system to seamlessly handle other tasks, requiring minimal effort on my part

function dragStart(e: MouseEvent | TouchEvent) {
  if ('touches' in e) {
    state.initialX = e.touches[0].clientX - state.xOffset
    state.initialY = e.touches[0].clientY - state.yOffset
  } else {
    state.initialX = e.clientX - state.xOffset
    state.initialY = e.clientY - state.yOffset
  }

}

Manage input from either mouse or touch events based on the event type

Answer №1

Answer №2

Similar questions

The mat-slide-toggle component does not recognize the checked binding

Issues with using hooks in a remote module in Webpack 5 module federation

Universal function for selecting object properties

Navigate Formik Fields on a Map

What defines a suitable application of the ref feature in React?

Adding items to the array is only effective when done within the loop

Choose particular spreadsheets from the office software

What is the correct way to apply type in the .call() method?

What are the downsides of utilizing a global function over a private static method in Typescript?

Issues arise when upgrading from Angular 8 to 9, which can be attributed to IVY

The data structure '{ recipe: null; }' cannot be matched with type 'IntrinsicAttributes & Recipe'

Unlocking the potential of the ‘Rx Observable’ in Angular 2 to effectively tackle double click issues

How to Access Static Method from Non-Static Method in TypeScript

In React Typescript, there is an issue with react-router v4 where the Route component does not pass its props to the specified component

Rearrange Material UI styles in a separate file within a React project

Improprove the types generated from GraphQL responses

What is the process for establishing the default type for an Activity Entity in Microsoft Dynamics?

What would be a colloquial method to retrieve the ultimate result from the iterator function?

Is it possible to deactivate input elements within a TypeScript file?

"Encountering the error of 'require is not defined' in an Electron-React-Webpack-Typescript application when utilizing