Javascript 为什么typescript在react中尝试使用ref时会抱怨？

我正在使用ref为滚动条上的元素设置动画

  const foo = () => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    setAnimClass(
      rect.top >= 0 && rect.bottom <= window.innerHeight ? styles.animClass : ""
    );
  };

constfoo=（）=>{
如果（！ref.current）返回；
const rect=ref.current.getBoundingClientRect（）；
setAnimClass(
rect.top>=0&&rect.bottom您可以在从react获得任何引用时将其强制转换为ref。

const ref=useRef（null）如有；

编辑：我想返回并给出一个更强类型的解决方案，但Sakshi的回答正好如此。这是一个懒惰的解决方案，所以请遵循他们的解决方案。
尝试以下方法：

const ref = useRef() as RefObject<HTMLDivElement>;

const foo = () => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    setAnimClass(
      rect.top >= 0 && rect.bottom <= window.innerHeight ? styles.animClass : ""
    );
  };

const ref=useRef（）作为重新对象；
常量foo=（）=>{
如果（！ref.current）返回；
const rect=ref.current.getBoundingClientRect（）；
setAnimClass(
rect.top>=0&&rect.bottom这很简单，只需将type
htmldevelment
添加到
useRef
，错误不再显示：

const ref = useRef<HTMLDivElement>(null);

可选链接可能会抑制错误
ref？.current？.getBoundingClientRect（）
尝试此操作。
ref？.current！.getBoundingClientRect（）
这里是什么重新对象？typescript抱怨重新对象您还必须添加导入语句。从“react”添加此
import{REOBJECT}在jsx中使用ref={ref}时出现错误，解决了这个问题。使用useRef（）非常有效，但如果jsx也能正常工作，我认为这是更合适的方法。告诉我你的代码在哪里使用你的
ref
？嗨，这是一个愚蠢的错误。我在输入类型中使用了ref。解决了这个问题。
useEffect(() => {
  foo();
  window.addEventListener("scroll", foo);
  window.addEventListener("resize", foo);
  return () => {
    window.removeEventListener("scroll", foo);
    window.removeEventListener("resize", foo);
  }
}, []);