gsap/react contextSafe callback types

[Pim de Wit]

Hi,

I am using TypeScript with React and GSAP.

Is there a way to correctly type event callbacks that are wrapped with `contextSafe`?

 

 

const onPointerMove = contextSafe((event: React.PointerEvent) => {});

 

...

// TS2322: Type Function is not assignable to type PointerEventHandler<HTMLDivElement>

<div onPointerMove={onPointerMove}/>

 

 

Here is a demo: 

See the Pen eYXgXXY by pimdewit (@pimdewit) on CodePen

[Rodrigo]

Hi @pdw and welcome to the GSAP Forums!

 

Yeah we've bumped into this and the solution is Type Casting:

https://www.typescripttutorial.net/typescript-tutorial/type-casting/

 

So basically this should work:

const onPointerMove = contextSafe(() => {}) as React.MouseEventHandler;

Hopefully this helps.

Happy Tweening!