[TypeScript] `GestureEvent` Callbacks Aren't Supported In Strict Mode

[orangecoloured]

Sorry I use issues for this kind of questions.

Do I understand correctly that I need to use CustomEvent<GestureEventData> for the handler functions? And if so, what do I do with the addEventListener call type errors? It expects to have Event for the event parameter, but gets CustomEvent<GestureEventData>. Is there a wrapping function that could avoid this type conflict or am I missing something? Should I use some workarounds to make TS linter happy?

[SE2Dev]

What linter are you using?

This should not produce any warnings or errors:

import type { GestureEventData } from "contactjs";

const element = document.getElementById("targetElement") as HTMLElement;

element.addEventListener("panstart", (e: CustomEvent<GestureEventData>) => {
    console.log(e);
});

Technically speaking, the following is preferred but the types are slightly still borked in v2.1.0:

import type { GestureEvent } from "contactjs";

const element = document.getElementById("targetElement") as HTMLElement;

element.addEventListener("panstart", (e: GestureEvent) => {
    console.log(e);
});

[orangecoloured]

I'm using preact setup with eslint 8.24 The error is Type 'Event' is missing the following properties from type 'CustomEvent<GestureEventData>': detail, initCustomEvent

[biodiv]

I just released v2.1.1 which includes https://github.com/biodiv/contactjs/commit/737fbcad0411541f533d665cc757d499d3ccdcb4

[SE2Dev]

@orangecoloured I'd recommend trying the second solution using v2.1.1, if it still doesn't work can you let me know what version of TypeScript you're using?

[orangecoloured]

@SE2Dev

TS version is 4.8.4

[SE2Dev]

I managed to reproduce your issue, it requires "strict": true in the tsconfig.json. I'll let you know when we have a fix available.

Discussions for possible resolutions are here.

[SE2Dev]

For the time being I recommend the following as a workaround:

import type { GestureEvent } from "contactjs";

const element = document.getElementById("targetElement") as HTMLElement;

element.addEventListener("panstart", (e) => {
    const event = e as GestureEvent;
});