Utilicé el gancho useRef para mi función de desplazamiento, configuré el tipo HTMLDivElement pero obtengo que la propiedad 'clientHeight, scrollHeight, scrollTop' no existe en el tipo 'HTMLDivElement | nulo',
Si paso el cursor sobre useRef, dice (alias) useRef<HTMLDivElement>(initialValue: HTMLDivElement | null): RefObject<HTMLDivElement> (+2 overloads) import useRef
const scrollRef = useRef<HTMLDivElement>(null); const getActivityFeedOnScroll = () => { const {scrollTop, scrollHeight, clientHeight} = scrollRef?.current; scrollTop + clientHeight === scrollHeight && fetchNextPage(); };Si me gusta de esta manera, el tipo no me da el error, pero quiero reemplazar las condiciones if con null guard, para que el código sea más limpio.
+ const getActivityFeedOnScroll = () => { + if (!scrollRef.current) return; + const {scrollTop, scrollHeight, clientHeight} = scrollRef.current; + if (scrollTop + clientHeight === scrollHeight) fetchNextPage(); + };Que yo sepa, simplemente no puedes hacer esto.
Piénsalo, en tu primer bloque de código, dices { someStuff } = scrollRef?.current; Si scrollRef no está definido o es nulo, no intenta acceder a la corriente, eso arrojaría algo como "la propiedad actual no existe en el tipo indefinido". En su lugar, scrollRef?.current es nulo, y { someStuff } por lo tanto no tiene sentido.
Si el lenguaje mecanografiado le permitiera hacer esto, tendría que verificar si someStuff no es nulo como este.
const scrollRef = useRef<HTMLDivElement>(null); const getActivityFeedOnScroll = () => { const {scrollTop, scrollHeight, clientHeight} = scrollRef?.current; if (scrollTop && clientHeight && scrollHeight) scrollTop + clientHeight === scrollHeight && fetchNextPage(); };Esto es más complicado que su segundo caso (que es la forma correcta de hacer las cosas).
Para resumir, si su primer caso no le dio un error en scrollRef?.current, se lo daría en la siguiente línea, donde debe usar las propiedades de scrollRef?.current.
Su código no es más desordenado, no tiene más "repetitivo", simplemente es más explícito, lo cual es bueno. Le está diciendo explícitamente a su código qué hacer cuando scrollRef.current es nulo.