Promise 返回 {} 而不是 ImageData (TypeScript)答案

【问题标题】：Promise returns {} instead of ImageData (TypeScript)Promise 返回 {} 而不是 ImageData (TypeScript)
【发布时间】：2019-03-06 15:30:33
【问题描述】：

尝试在 TypeScript 中使用此代码：

convertURIToImageData(URI) {
    return new Promise((resolve, reject) => {
      if (URI == null) { return reject(); }
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      const image = new Image();
      image.addEventListener('load', () => {
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(image, 0, 0, canvas.width, canvas.height);
        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        resolve(imageData);
      }, false);
      image.src = URI;
    });}

从 Promise 返回 ImageData 但我得到的只是{}

像这样使用它：

this.convertURIToImageData('url').then((img) => {
  // do stuff with ImageData
})

获取：

 Argument of type '{}' is not assignable to parameter of type 'ImageData'. Type '{}' is missing the following properties from type 'ImageData': data, height, width

【问题讨论】：

你如何确定它只是{}？
如果您的意图是获得data:image 类型的返回，您应该使用canvas.toDataURL("image/png"); 和您想要的图像MIME 类型。
很难说，因为你实际上并没有添加关键的代码，但我想这是How do I return the response from an asynchronous call?的副本
{} 是 TypeScript 报告的返回类型，还是运行时的实际值？
它实际上在 Angular 构建/服务中，得到：“{}”类型的参数不可分配给“ImageData”类型的参数。类型“{}”缺少类型“ImageData”的以下属性：数据、高度、宽度

标签： javascript typescript promise

【解决方案1】：

{} 当前是 TypeScript 的后备类型。如果 TypeScript 无法推断函数返回的类型，它将自动推断 {}。 TypeScript，无法在您使用它的上下文中推断img 的类型，因此它推断{} 并且无法编译。

如果您将 TypeScript 集成到您的代码编辑器中，只需将鼠标悬停在函数上即可确认是否发生这种情况，您将看到返回类型为 Promise<{}>。您可以通过注释函数返回类型来轻松解决此问题：

convertURIToImageData(URI): Promise<ImageData> {

现在返回类型正确显示为Promise<ImageData>，您的代码应该可以编译了。

【讨论】：

但是为什么不能推断出类型呢？看起来应该可以了。
我同意这很奇怪，我认为这与使用 resolve 和 reject 而不是标记函数 async 有关。似乎 resolve 被键入以返回 {} 而不是出于某种原因使用一些通用