React Typescript event type for both interfaces MouseEvent and TouchEvent

Question

I am trying to write a function to handle both mouse and touch events. By combining both interfaces React.TouchEvent and React.MouseEvent, like:

onStart = (event: React.TouchEvent | React.MouseEvent) => {
    event.persist();
    console.log('event ', event);
    if (event.touches) {
        console.log(event.touches);
    }
    if (event.screenX) {
        console.log(event.screenX);
    }
};

The logs give me the expected output and I don't get any console error, it runs as it I expected. But I get errors on my editor:

Error:(94, 22) TS2339: Property 'screenX' does not exist on type 'MouseEvent | TouchEvent'. Property 'screenX' does not exist on type 'TouchEvent'.

and

Error:(90, 13) TS2339: Property 'touches' does not exist on type 'MouseEvent | TouchEvent'. Property 'touches' does not exist on type 'MouseEvent'.

How can I use both intefaces React.TouchEvent and React.MouseEvent without all this errors?

Answer 1

By checking for instanceof TouchEvent and instanceof MouseEvent in the condition and using the nativeEvent property inside event, it is possible to access each individual interface with no errors.

onStart = (event: React.TouchEvent | React.MouseEvent) => {
    event.persist();
    console.log('event ', event);
    if (event.nativeEvent instanceof TouchEvent) {
        console.log(event.nativeEvent.touches);
    }

    if (event.nativeEvent instanceof MouseEvent) {
        console.log(event.nativeEvent.screenX);
    }
};