React图片裁剪项目两处TypeScript类型错误的修复方案咨询

在实现图片裁剪功能时，复制参考代码后出现两处TypeScript错误，以下是具体修复方案：

错误1：imagePreview.ts中canvas.toBlob回调参数类型不兼容 #

错误详情 #

ERROR in src/imagePreview.ts:8:19
TS2345: Argument of type '(value: Blob | PromiseLike<Blob>) => void' is not assignable to parameter of type 'BlobCallback'...

问题原因 #

canvas.toBlob的内置回调类型BlobCallback要求参数为Blob | null，但你的回调函数参数声明为Blob | PromiseLike<Blob>，类型不匹配。

修复方案 #

调整回调参数类型为Blob | null，并在逻辑中处理null的边界情况：

// 修改后的代码示例
canvas.toBlob((blob: Blob | null) => {
  if (!blob) {
    // 可添加blob为空时的处理逻辑，比如提示用户裁剪失败
    return;
  }
  // 正常处理blob的业务逻辑
}, 'image/png'); // 可根据需求指定图片格式

错误2：useDebounceEffect.ts中依赖项类型不兼容 #

错误详情 #

ERROR in src/useDebounceEffect.ts:10:27
TS2345: Argument of type 'DependencyList | undefined' is not assignable to parameter of type '[]'...

问题原因 #

自定义HookuseDebounceEffect的依赖项参数被错误限制为空数组类型[]，但实际传入的是DependencyList | undefined，导致类型不匹配。

修复方案 #

修改useDebounceEffect的类型定义，允许依赖项为DependencyList或undefined，并设置默认值为空数组：

import { DependencyList, useEffect } from 'react';

// 修改后的代码示例
function useDebounceEffect(
  effect: () => void,
  delay: number,
  deps: DependencyList = []
) {
  useEffect(() => {
    const timer = setTimeout(effect, delay);
    return () => clearTimeout(timer);
  }, [effect, delay, ...deps]);
}

内容的提问来源于stack exchange，提问作者user15361826