将gsap类型与React useRef()和Typescript - ScrollTrigger不匹配

Question

所以我有一个简单的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 | Element | undefined‘，所以我以错误结尾：

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的资源。

你知道我该怎么解决这个问题吗？

Answer 1

最终解决这个问题比我想象的要容易。因为类型'null‘与'string | Element | 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!})