Angular Загрузка изображения внутри Обещания, не способного передать объект изображения через разрешение ()

Question

У меня есть обещание загрузить изображение. Я просто хочу распечатать размер изображения после загрузки. Я получаю сообщение об ошибке для 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));

Answer 1

Вы должны четко указать, какое обещание вы создаете, потому что машинопись не может автоматически это понять. Поэтому в вашей версии машинописи по умолчанию используется Promise<{}>, а с версии 3.5 и выше это будет Promise<unknown>. Ни пустой объект, ни unknown не имеют свойства width, следовательно, ошибка позже.

Исправление заключается в добавлении явного возвращаемого типа в 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;
    })
  }

или добавлении его самому конструктору обещаний:

  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;
    })
  }

или сделайте оба, если хотите:)