Getting Typescript to work

disclaimer: this will be updated over time as I come across more interesting notes on writing Typescript in React

useRef

in typescript, you would usually initialize with null. however, typescript would not allow it during strict null checking, therefore we have to specify what type of element we want to reference

// NOPE
const imgRef = useRef(null)
// YES
const imgRef = useRef<HTMLImageElement>(null)

useEffect(() => {
  const img = imgRef.current
  img && img.complete && setImgLoaded(true) // ts will complain about img.complete if you don't specify <HTMLImageElement>
}, [])

ref