0

I am working on a simple hook to export animation helper and element ref i.e.

import { gsap } from 'gsap';
import { useRef } from 'react';

export function useTween<R extends gsap.TweenTarget>(vars: gsap.TweenVars['pixi']) {
  const tweenRef = useRef<R>(null);
  const tween = gsap.to(tweenRef.current, { pixi: vars });

  return [tween, tweenRef];
}

What matters here is that returned array has types, however when I use it in another component i.e.

const [textTween, textRef] = useTween<Text>({ scale: 2 });

now textTween and textRef both have type of any, I was under impression that these types would be preserved, but am I missing something here?

Minimog
  • 129
  • 1
  • 6
  • you can try adding return type to the hook, or what could be even better to create a function type and then just use it. This could be the answer https://stackoverflow.com/questions/60137706/react-hooks-typescript-event-and-state-types – Serhii Yukhnevych Jul 29 '20 at 08:04

1 Answers1

1

you are forgetting to specify return type of your function:

export function useTween<R extends gsap.TweenTarget>(vars: gsap.TweenVars['pixi']): [gsap.TweenTarget, gsap.TweenTarget] {
Kavian Rabbani
  • 934
  • 5
  • 15