Resize-observer ResizeHandler element support generics

[Phinome]

Describe The Problem To Be Solved

in case:

let ref
createResizeObserver(() => ref, ({ width, height }, el) => {
  if (el === ref) console.log(width, height)
});
<div ref={ref}/>

el is HTMLElement, but handler of parameter el to Element.

i want to get offsetWidth or offsetHeight from el, but typescript would checked failed: "The Element type has no offsetWidth or offsetHeight attribute."

Suggest A Solution

just like this:

export type ResizeHandler<T> = (
  rect: DOMRectReadOnly,
  element: T,
  entry: ResizeObserverEntry,
) => void;

[Phinome]

no body care？

[maciek50322]

In typescript you can always force different type if you are sure it is different type or check it

let ref;
createResizeObserver(() => ref, ({ width, height }, el) => {
  // if you are sure of the type
  (el as HTMLElement).offsetWidth;
  // checking if it contains prop you want
  if (offsetWidth in el) el.offsetWidth;
});
<div ref={ref}/>

Generics will simplify this for you, but note that typescript also generalize types whenever it can, so if we had generics and

let ref: HTMLElement;
let ref2: Element;
createResizeObserver(() => [ref, ref2], ({ width, height }, el) => {
  // `el` would be generalized here to type `Element`, because `HTMLElement` extends `Element`
  // still would have to check it manually
});
<div ref={ref}/>