如何在打字稿中使用Image中的onload事件？

Question

我想从使用带typescript的新image（）加载的图像中获取一些信息。我尝试以下代码：

width;
heigth;
init(){
    let image = new Image();
    image.src = "url";

    image.onload((event) => {
    this.width = event.width;
    this.heigth = event.heigth;
    })
}

但是我得到这个错误：

无效”不能分配给“事件”类型的参数。类型（（）=> void'中缺少属性'bubbles'

我搜索了有关如何使用此事件的示例，但我找不到任何东西。

Answer 1

您正在尝试调用onload而不是分配事件处理程序。这是给您的快速解决方案...

image.onload = (event) => {
  // ...
};

您还会发现常规Event类型没有宽度和高度，因此您可能还需要对此类型进行专用化。

interface SizedEvent {
  width: number;
  height: number;
}

function isSizedEvent(e: any): e is SizedEvent {
  return (e && e.width !== undefined && e.height !== undefined);
}  

image.onload = (event) => {
  if (isSizedEvent(event)) {
    // event.width is now available
  }
};