Javascript IntersectionObserver API和TypeScript

试图将IntersectionObserver API与Typescript一起使用，但列表会无限滚动。 它在没有TS的情况下工作，但有TS错误。我是TS新手，不知道如何修复它

const MyItemsList: React.FC<ItemsListProps> = (props) => {
  const [page, setPage] = useState(0)
  const [size, setSIze] = useState(5)

  const observer = useRef()
  const { isLoading, content, hasMore } = useGetContent(page, size, type)

  const lastItemRef = useCallback((node) => {
    if (isLoading) return
    if (observer.current) observer.current.disconnect() 
    // Error: TS2532: Object is possibly 'undefined'.
    // why it should try to use `observer.current.disconnect()` after if(observer.current) condition

    observer.current = new IntersectionObserver(entries => { 
    //Error: TS2322: Type 'IntersectionObserver' is not assignable to type 'undefined'.
      if (entries[0].isIntersecting && hasMore) {
        setPage(prevPage => prevPage + 1)
      }
    })

    if (node) observer.current.observe(node) 
    // Error TS2532: Object is possibly 'undefined'.
  }, [isLoading, hasMore])

  const itemsList = () => {
    if (typeof (content) !== 'undefined') {
      return content.map((item, index) => {
        if (content.length === index + 1) {
          return (
            <li ref={lastItemRef} key={item.id}>
              <ItemPreview item={item} />
            </li>
          )
        }

        return (
          <li key={item.id}>
            <ItemPreview item={item} />
          </li>
        )

      })
    }
    return ( <div>Loading...</div> )
  }
  return ( <ul>{itemsList()}</ul> )
}

export default MyItemsList

const MyItemsList:React.FC=（道具）=>{
const[page，setPage]=useState（0）
常量[大小，设置大小]=使用状态（5）
const observer=useRef（）
const{isLoading，content，hasMore}=useGetContent（页面，大小，类型）
const lastItemRef=useCallback（（节点）=>{
如果（卸载）返回
if（observer.current）observer.current.disconnect（）
//错误：TS2532:对象可能为“未定义”。
//为什么在if（observer.current）条件之后尝试使用`observer.current.disconnect（）`
observer.current=新的IntersectionObserver（条目=>{
//错误：TS2322:类型“IntersectionObserver”不可分配给类型“undefined”。
if（条目[0]。isIntersecting&&hasMore）{
设置页面（prevPage=>prevPage+1）
}
})
if（节点）observer.current.observe（节点）
//错误TS2532:对象可能为“未定义”。
}，[isLoading，hasMore]）
const itemsList=（）=>{
如果（内容的类型）！=‘未定义’）{
返回content.map（（项目，索引）=>{
if（content.length==索引+1）{
返回(


)
}
返回(


)
})
}
返回（加载…）
}
返回（
{itemsList（）}
）
}
导出默认MyItemsList

---

有没有关于如何修复TS错误的建议？

该错误来自以下事实：

observer.current

可能包含未定义的内容，这意味着您不能使用

observer.current

的属性或方法，因为它可能不是对象。通过使用运算符（

？。

），可以避免使用可能不存在的属性或方法。这应该让Typescript知道，如果您试图访问的属性或方法不存在，那么您的应用程序将不会遇到错误。

我想我需要以某种方式设置Ref default。。。如何在上面的代码中使用（？）

observer.current？.disconnect（）

dosen不起作用。如果

observer.current？.disconnect（）

不起作用，则我假设Typescript已确定您的引用可能包含某些内容，但某些内容没有disconnect方法。我想说，用指定的类型设置ref可能会解决这个问题。正如您所说，这将通过

useRef（）

更改

const observer=useRef（）

完成，所有错误都消失了。