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

时间:2019-03-06 15:30:33

标签: javascript typescript promise

尝试在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

1 个答案:

答案 0 :(得分:2)

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

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

convertURIToImageData(URI): Promise<ImageData> {

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