I am using React with Typescript to handle images. I found this great CodeSandbox from react-easy-crop, where they have a utils file using the following snippet:
return new Promise((resolve) => {
canvas.toBlob((file) => {
resolve(URL.createObjectURL(file));
}, 'image/png');
});
This snipped throws the following Typecsript error complaining about the file parameter passed to URL.createObjectURL(file): Argument of type 'Blob | null' is not assignable to parameter of type 'Blob | MediaSource'.
Type 'null' is not assignable to type 'Blob | MediaSource'.ts(2345)
As URL.createObjectURL() is expecting a type like Blob | MediaSource, I tried to give this type to the callback function parameter like this:
return new Promise((resolve) => {
canvas.toBlob((file: Blob | MediaSource) => {
resolve(URL.createObjectURL(file));
}, 'image/png');
});
But this throws a new Typescript error: Argument of type '(file: Blob | MediaSource) => void' is not assignable to parameter of type 'BlobCallback'. Types of parameters 'file' and 'blob' are incompatible. Type 'Blob | null' is not assignable to type 'Blob | MediaSource'. Type 'null' is not assignable to type 'Blob | MediaSource'.ts(2345)
Can anyone please advise about how to handle the types for the file parameter? thank you.
It is complaining that file can be null, which would not be a good thing to pass in URL.createObjectURL.
If you know that it can never be null, use an assertion:
return new Promise((resolve) => {
canvas.toBlob((file) => {
resolve(URL.createObjectURL(file!));
// ^ '!' used as assertion
}, 'image/png');
});
Otherwise, handle it appropriately first with an if statement.