Как правильно набрать `animated` fn в набранной пользовательской реакции? - PullRequest
Новая
       28

Как правильно набрать `animated` fn в набранной пользовательской реакции?

1 голос
/ 05 мая 2019

Я борюсь с использованием react-spring (это круто) в проекте машинописного текста с включенным noImplicitAny. Мне нужно экспортировать анимированную функцию из реагирующей пружины как часть моего пользовательского хука. Но я не могу понять, как правильно его напечатать.

Вот моя попытка ... 

/* 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) Попытался просмотреть подпись анимированного в реагирующем источнике и подумал, что мне сойдет с рук этот набор (TypeScript newbie btw).

imageanimated's type definitions with intelli sense">

Выше Определения типа смысла Intelli для 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) Typescript жалуется на 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) , и он работает таким образом, но я бы предпочел отделить весь связанный с пружиной код в этот пользовательский хук и импортируйте его оттуда вместо (4) .

Какой правильный / наиболее подходящий способ определения типов для анимации? * * Тысяча сорок-девять (1) . Есть ли какие-либо экспортируемые типы, которые мне не хватает в react-spring? Спасибо.

...