如何在键入的自定义react钩子中正确键入`animated` fn？

Question

在react-spring打开的情况下，我正在打字稿项目中使用noImplicitAny（太棒了）。我需要从react-spring导出动画函数作为我的自定义钩子的一部分。但是我不知道如何正确键入它。

这是我的尝试...

---

/* Custom react hook - useAnimation.js */

import {
  ForwardRefExoticComponent,
  ComponentPropsWithRef,
  ReactType,
} from 'react';
import { useSpring, animated, AnimatedValue } from 'react-spring';

interface UseAnimationReturnTypes {
  /* Typing this animated fn (1) */
  animated<T extends ReactType>(
    comp: T
  ): ForwardRefExoticComponent<ComponentPropsWithRef<T>>;
  fadeIn: AnimatedValue<{}>;
}

const useAnimation = (): UseAnimationReturnTypes => {
  const fadedAnim = useSpring({
    opacity: 1,
    transform: 'translate3d(0, 0, 0)',
    from: {
      opacity: 0,
      transform: 'translate3d(0, -0.25rem, 0)',
    },
  });

  return {
    animated,
    fadeIn: fadedAnim,
  };
};

export default useAnimation;

（1）尝试查看react-spring中animation的签名，并认为我会摆脱这种打字方式（TypeScript newbie btw）。

上方 animated

的智能感知类型定义

---

在这样的组件中使用它。

/* My Component Welcome.js */

import React from 'react';
/* I do not want to import animated directly (3) */
// import { animated } from 'react-spring'

import useAnimation from './animations/useAnimation';

const Welcome = (): JSX.Element => {
  /* I need to extract it from the hook (4) */
  const { fadeIn, animated } = useAnimation();
  return (
    { /* animated.div throws the type error (2) */ }
    <animated.div className="display-message" style={fadeIn}>
      <h1 className="title">Hello</h1>
      <hr />
      <div className="message">
        <p>
          Your are In!
          <strong> &nbsp; Welcome</strong>
        </p>
      </div>
    </animated.div>
  );
};

（2）打字稿在animated.div处出现以下错误！

  

Property 'div' does not exist on type '<T extends ElementType<any>>(comp: T) => ForwardRefExoticComponent<ComponentPropsWithRef<T>>'.ts(2339)

---

#PS 我可以直接从animated导入react-spring并在组件（3）中使用它，它可以正常工作方式，但我希望将所有与Spring相关的代码分离到该自定义挂钩中，然后从此处导入（4）。

定义动画类型的正确/最适当方法是什么？ （1）。 react-spring中是否缺少任何导出的类型？谢谢。