Set Types for HTMLCanvasElement.toBlob callback and URL.createObjectURL

Question

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.

Answer 1

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.