IntersectionObserver API and TypeScript

Question

Tried to use IntersectionObserver API with Typescript, its the list with infinity scrolling. It works without TS, but got TS errors. I'm new in TS, And don't know how to fix it.

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

Any advice how to fix TS errors?

Answer 1

const observer = useRef<IntersectionObserver | null>(null);

Credits: 1 and 2