TypeScript使用ResizeObserver出现类型报错，不使用any如何解决？

错误原因 #

ResizeObserver 构造函数传入的回调第一个入参是ResizeObserverEntry[]数组类型，不是单个ResizeObserverEntry类型。ResizeObserver支持同时监听多个DOM元素，触发回调时会把所有发生尺寸变化的元素对应的条目以数组形式返回，这就是报错提示数组类型不匹配单个条目类型的根因。

正确实现方案 #

写法1：直接定义参数为数组类型 #

如果只监听单个元素，直接取数组第一个元素即可：

const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
  const element = entries[0];
  // 执行业务逻辑
  console.log(element.contentRect);
});
// 监听元素示例
resizeObserver.observe(document.body);

写法2：使用内置ResizeObserverCallback类型 #

之前使用该类型报错是写法不规范，正确用法如下，TS会自动推导参数类型，无需额外手动声明：

const resizeCallback: ResizeObserverCallback = (entries) => {
  const element = entries[0];
  // 执行业务逻辑
}
const resizeObserver = new ResizeObserver(resizeCallback);

多元素监听场景写法 #

如果同时监听多个元素，遍历数组处理所有变化的条目即可：

const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
  entries.forEach(entry => {
    console.log(`元素${entry.target}的新尺寸：`, entry.contentRect);
  })
});
// 监听多个元素示例
resizeObserver.observe(document.getElementById('box1')!);
resizeObserver.observe(document.getElementById('box2')!);

内容的提问来源于stack exchange，提问作者user15909643