Обещание возвращает {} вместо ImageData (TypeScript)

Попытка использовать этот код в 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;
    });}

чтобы вернуть 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

как вы определяете, что это просто {}?

Daniel A. White 06.03.2019 16:34

Если вы хотите получить возврат типа data:image, вы должны использовать canvas.toDataURL("image/png"); с желаемым типом MIME изображения.

Randy Casburn 06.03.2019 16:41

Трудно сказать, потому что вы на самом деле не добавили важный фрагмент кода, но я полагаю, что это дубликат Как вернуть ответ на асинхронный вызов?.

Liam 06.03.2019 16:41

{} — это тип возвращаемого значения, о котором сообщает TypeScript, или фактическое значение во время выполнения?

Madara's Ghost 06.03.2019 16:42

На самом деле в Angular build/serve получение: Аргумент типа '{}' не может быть назначен параметру типа 'ImageData'. В типе '{}' отсутствуют следующие свойства типа 'ImageData': данные, высота, ширина.

K41F4r 06.03.2019 17:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
5
415
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

{} в настоящее время является резервным типом TypeScript. Если TypeScript не может определить, какой тип возвращается функцией, он автоматически выведет {}. TypeScript не может определить тип img в контексте, в котором вы его используете, поэтому он выводит {} и не компилируется.

Вы можете подтвердить, что это происходит, если у вас есть TypeScript, интегрированный в ваш редактор кода, просто наведя указатель мыши на функцию, вы увидите, что возвращаемый тип — Promise<{}>. Вы можете легко исправить это, аннотировав возвращаемый тип функции:

convertURIToImageData(URI): Promise<ImageData> {

Теперь тип возвращаемого значения правильно отображается как Promise<ImageData>, и ваш код должен скомпилироваться.

Но почему он не может сделать вывод о типе? Вроде должно работать.

Bergi 06.03.2019 18:34

Я согласен, что это странно, я думаю, что это как-то связано с использованием resolve и reject, а не с маркировкой функции async. Похоже, что resolve набирается для возврата {} вместо использования какого-то общего по какой-либо причине

Robbie Milejczak 06.03.2019 18:38

Другие вопросы по теме