Set Types for HTMLCanvasElement.toBlob callback and URL.createObjectURL-CodePudding

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.

CodePudding user response：

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.