为 HTMLCanvasElement.toBlob 回调和 URL.createObjectURL 设置类型

Question

我正在使用 React 和 Typescript 来处理图像。我从 react-easy-crop 中找到了 this 很棒的 CodeSandbox，他们有一个使用以下代码片段的 utils 文件：

return new Promise((resolve) => {
    canvas.toBlob((file) => {
        resolve(URL.createObjectURL(file));
    }, 'image/png');
});

此片段引发以下 Typecsript 错误，抱怨传递给 URL.createObjectURL(file) 的文件参数：'Blob | null' 类型的参数不可分配给 'Blob | MediaSource' 类型的参数。类型 'null' 不可分配给类型 'Blob | MediaSource'.ts(2345)

As URL.createObjectURL() 期待像 Blob 这样的类型 | MediaSource，我试过这样给回调函数参数这个类型：

return new Promise((resolve) => {
    canvas.toBlob((file: Blob | MediaSource) => {
        resolve(URL.createObjectURL(file));
    }, 'image/png');
});

但这会引发一个新的 Typescript 错误：“(file: Blob | MediaSource) => void”类型的参数不可分配给 'BlobCallback' 类型的参数。参数类型 'file' 和 'blob' 不兼容。类型 'Blob | null' 不可分配给类型 'Blob | MediaSource'。类型 'null' 不可分配给类型 'Blob | MediaSource'.ts(2345)

谁能告诉我如何处理文件参数的类型？谢谢。

Answer 1

抱怨file可以为null，传入URL.createObjectURL可不是什么好事。

如果您知道它永远不会为空，请使用断言：

return new Promise((resolve) => {
    canvas.toBlob((file) => {
        resolve(URL.createObjectURL(file!));
//                                      ^ '!' used as assertion
    }, 'image/png');
});

否则先用if语句适当处理

为 HTMLCanvasElement.toBlob 回调和 URL.createObjectURL 设置类型

Set Types for HTMLCanvasElement.toBlob callback and URL.createObjectURL

javascript

typescript

typescript-typings

react-typescript