Question

我正在尝试使用以下代码获取滚动位置：

    useEffect (()=>{
    document.addEventListener("scroll", e => {
        let scrolled = document.scrollingElement.scrollTop;
        if (scrolled >= 5){
           setPos("moved")
        } else {
           setPos("top")
        }
    })
  },[])

Typescript 抱怨 document.scrollingElement.scrollTop 说它可能为空。如何避免此错误并保持打字稿愉快？

Answer 1

至少有两种方法。

如果元素不存在则中断函数

document.addEventListener("scroll", e => {
  if (!document.scrollingElement) {
    return;
  }

  let scrolled = document.scrollingElement.scrollTop;
  ...
});

与exclamation mark operation核对：

document.addEventListener("scroll", e => {
  let scrolled = document.scrollingElement!.scrollTop;
  ...
});

Answer 2

只需做一个null检查

useEffect(() => {
  document.addEventListener("scroll", e => {
    if (document.scrollingElement !== null) {
      const scrolled = document.scrollingElement.scrollTop;
      if (scrolled >= 5) {
        setPos("moved")
      } else {
        setPos("top")
      }
    }
  })
}, [])

Answer 3

我发现 null 检查保护子句是最好的方法。

useEffect (()=>{
   document.addEventListener("scroll", e => {
   let scrolled = document.scrollingElement.scrollTop;
   if (scrolled === null) {
      return;
   }
   if (scrolled >= 5){
      setPos("moved")
   } else {
      setPos("top")
    }
 })
},[])

如何避免 Typescript 对象可能为“空”。 TS2531

3 个答案: