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?

score 11 · Answer 1 · answered Feb 03 '22 at 15:54

11

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

Credits: 1 and 2

answered Feb 03 '22 at 15:54

Gabriel Arghire

1,992
1
21
34

score 3 · Accepted Answer · answered Feb 02 '21 at 09:09

3

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.

answered Feb 02 '21 at 09:09

serpentbell

161
1

I thought I need set Ref default somehow... How can I use (?.) in code above? ```observer.current?.disconnect()``` dosen't work. – Lex2000 Feb 02 '21 at 09:16
4

If `observer.current?.disconnect()` doesn't work then I would assume that Typescript has determined it's possible that your ref contains something but that something doesn't have a disconnect method. I would say that setting up the ref with a specified type might fix it. That would be done with `useRef()` – serpentbell Feb 02 '21 at 09:30
1

changed ```const observer = useRef()``` as you said, and all errors gone. – Lex2000 Feb 02 '21 at 09:43

IntersectionObserver API and TypeScript

2 Answers2

Linked