Promise 内部的角度加载图像无法通过解析（）传递图像对象答案

【问题标题】：Angular Loading Image Inside of a Promise not able to pass Image object thru resolve()Promise 内部的角度加载图像无法通过解析（）传递图像对象
【发布时间】：2020-02-07 07:39:02
【问题描述】：

我承诺加载图片。我只想在加载后打印出图像大小。我在

的 image.width 和 image.height 上遇到错误

“类型 '{}' 上不存在属性 'width'。”

我错过了什么？

addImageProcess(src){
    return new Promise((resolve, reject) => {
      let img = new Image()
      img.addEventListener("load", () => resolve(img));
      img.addEventListener("error", err => reject(err));
      img.src = src;
    })
}

this.addImageProcess(imgData)
  .then(img  => console.log("------ image.width = " + img.width + ", image.height = " + img.height))
  .catch(err => console.error(err));

【问题讨论】：

标签： angular typescript promise

【解决方案1】：

您需要明确说明您正在创建什么样的承诺，因为 typescript 无法自动弄清楚这一点。因此，在您的打字稿版本中，它默认为Promise<{}>，而从version 3.5 onward 它将是Promise<unknown>。空对象和unknown 都没有宽度属性，因此稍后会出现错误。

解决方法是向 addImageProcess 添加显式返回类型：

  addImageProcess(src: string): Promise<HTMLImageElement>{
    return new Promise((resolve, reject) => {
      let img = new Image()
      img.addEventListener("load", () => resolve(img));
      img.addEventListener("error", err => reject(err));
      img.src = src;
    })
  }

或将其添加到 Promise 构造函数本身：

  addImageProcess(src: string) {
    return new Promise<HTMLImageElement>((resolve, reject) => {
      let img = new Image()
      img.addEventListener("load", () => resolve(img));
      img.addEventListener("error", err => reject(err));
      img.src = src;
    })
  }

如果你愿意，也可以两者都做：)

【讨论】：