Установите типы для обратного вызова HTMLCanvasElement.toBlob и URL.createObjectURL
Я использую React с Typescript для обработки изображений. Я нашел это отличный CodeSandbox от react-easy-crop, где у них есть файл utils, использующий следующий фрагмент:
return new Promise((resolve) => {
canvas.toBlob((file) => {
resolve(URL.createObjectURL(file));
}, 'image/png');
});
Этот фрагмент выдает следующую ошибку Typecsript, жалующуюся на параметр файла, переданный в URL.createObjectURL(file): Аргумент типа «Blob | null» нельзя присвоить параметру типа «Blob | Медиа Источник».
Тип «null» не может быть назначен типу «Blob | MediaSource'.ts(2345)
Поскольку URL.createObjectURL() ожидает такой тип, как Blob | MediaSource, я пытался придать этому типу параметр callback-функции вот так:
return new Promise((resolve) => {
canvas.toBlob((file: Blob | MediaSource) => {
resolve(URL.createObjectURL(file));
}, 'image/png');
});
Но это вызывает новую ошибку Typescript: аргумент типа «(файл: Blob | MediaSource) => void» не может быть назначен параметру типа «BlobCallback». Типы параметров «файл» и «блоб» несовместимы. Введите «большой двоичный объект | null» нельзя присвоить типу «Blob | Медиа Источник». Тип «null» не может быть назначен типу «Blob | MediaSource'.ts(2345)
Может ли кто-нибудь посоветовать, как обрабатывать типы для параметра файла? благодарю вас.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Он жалуется, что file может быть нулевым, что было бы нехорошо передавать URL.createObjectURL.
Если вы знаете, что оно никогда не может быть нулевым, используйте утверждение:
return new Promise((resolve) => {
canvas.toBlob((file) => {
resolve(URL.createObjectURL(file!));
// ^ '!' used as assertion
}, 'image/png');
});
В противном случае сначала обработайте его соответствующим образом с помощью оператора if.