Почему Gsap-TimelineLite вызывает Object не расширяемый при переключении на TypeScript? - PullRequest
Новая
       21

Почему Gsap-TimelineLite вызывает Object не расширяемый при переключении на TypeScript?

0 голосов
/ 25 апреля 2020

У меня есть приложение React с функциональным компонентом, в котором я использую небольшую анимацию GSAP.

Сегодня я попытался перенести приложение из vanilla JS в TypeScript, и я начал с этого маленького компонента: 

interface Props {}

const Item1Content: React.FC<Props> = ({}) => {
  let centerLabel = useRef(null);

  const timeLine = useRef<TimelineLite | null>(null);

  useEffect(() => {
    timeLine.current = new TimelineLite({ paused: true });
    timeLine.current.to(centerLabel, 0.5, { opacity: 0.1 });
  }, []);

  return (
    <>
      <CarouselItemWrapper
        backgroundImage={background}
        backgroundImageVerticalPosition={"bottom"}
      >
        <CenterLabel ref={centerLabel}>blupp blupp</CenterLabel>
      </CarouselItemWrapper>
    </>
  );
};

export default Item1Content;

Код отлично работает как файл. js (имеется фактически это второй useEffect, который воспроизводит анимацию. Я удалил его для поиска ошибок), но когда я включаю его в .tsx, в браузере появляется следующая ошибка:

TypeError: can't define property "_gsap": Object is not extensible

причина в том, что строка:

timeLine.current.to(centerLabel, 0.5, { opacity: 0.1 })

Так я правильно понял? TimeLineLite-Object, на который ссылается timeLine.current, не может получить добавление новых свойств, что пытается сделать проблемная строка? Ошибка всегда была там, но javascript просто все равно, и добавили свойство в любом случае, но машинопись настолько строга, что она говорит мне: «Ни за что, правильно!»? Но как я могу сделать это правильно?

Спасибо

1 Ответ

0 голосов
/ 25 апреля 2020

Хорошо, я понял это сам ... Я был таким слепым. Мне понадобилось несколько часов, чтобы понять, что я должен использовать «centerLabel.current» вместо просто «centerLabel».

...