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

Answer 2

The error comes from the fact that observer.current may contain undefined, which would mean that you can't use properties or methods of observer.current, since it may not be an object. You can avoid using potentially absent properties or methods by using the optional chaining operator (?.). This should let Typescript know that if the property or method you're trying to access doesn't exist then your application won't encounter an error.