将 gsap ScrollTrigger 与 React useRef() 和 Typescript 一起使用 - 类型不匹配答案

【问题标题】：Use gsap ScrollTrigger with React useRef() and Typescript - types not matching将 gsap ScrollTrigger 与 React useRef() 和 Typescript 一起使用 - 类型不匹配
【发布时间】：2021-03-01 15:02:36
【问题描述】：

所以我有一个简单的 React 组件，并想使用 GreenSock ScrollTrigger 插件对其进行动画处理。不幸的是，在这个项目中，我使用 Typescript 并且类型不匹配。代码：

import React, {useRef, useEffect}  from "react";
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'
import styled from "styled-components";

export default function Component() {

    const content = useRef<HTMLDivElement>(null)
    
    useEffect(()=>{
        gsap.registerPlugin(ScrollTrigger)
        gsap.from(content.current, {opacity: 0, y: 100, duration: 1, scrollTrigger:content.current})
    },[])

    return (
        <Container ref={content}>
          {..some content}
        </Container>
    )
}
const Container = styled.div`
  //styles here
`

显然 scrollTriger 只接受类型：'string |元素 |不明确的' 所以我最终得到了错误：

Type 'HTMLDivElement | null' is not assignable to type 'string | Element | undefined'.
[1]   Type 'null' is not assignable to type 'string | Element | undefined'.

如果没有 Typescript，这段代码可以工作。

我查了gsap论坛，但什么也没找到，关于TS的资源很少。

有什么想法可以解决吗？

【问题讨论】：

标签： reactjs typescript gsap

【解决方案1】：

终于解决了这个问题，比我想象的要容易。因为类型 'null' 与 'string | 不兼容元素 | undefined'，断言运算符“！”解决了这个问题。

现在代替：

// bad
gsap.from(content.current, {opacity: 0, y: 100, duration: 1, scrollTrigger:content.current})

我有：

// good
gsap.from(content.current!, {opacity: 0, y: 100, duration: 1, scrollTrigger:content.current!})

【讨论】：

最好在创建补间之前检查它是否不为空，以避免创建它的工作。