如何为回调函数添加正确类型？修复ESLint类型赋值错误

错误原因 #

fetch的catch方法捕获的错误参数类型是unknown（TypeScript 4.4+）或any，而你定义的errorCallback要求参数是object类型，直接传递会导致类型不兼容，触发ESLint的类型不安全提示。

解决方案 #

方案1：修正errorCallback的参数类型（推荐） #

根据fetch错误的实际情况，把errorCallback的参数类型改为Error或unknown：

// 推荐用Error类型，因为fetch抛出的通常是Error实例
export const get = (
  route: string,
  callback: (response: object) => void,
  errorCallback: (error: Error) => void, // 改为Error类型
) => {
  fetch(`${host}/${route}`)
    .then(response => response.json())
    .then(callback)
    .catch(error =>
      errorCallback ? errorCallback(error as Error) : console.error(error), // 若类型仍有疑问，添加类型断言
    )
}

如果需要兼容更广泛的错误类型，也可以用unknown，然后在回调内部做类型收窄：

export const get = (
  route: string,
  callback: (response: object) => void,
  errorCallback: (error: unknown) => void, // 改为unknown类型
) => {
  fetch(`${host}/${route}`)
    .then(response => response.json())
    .then(callback)
    .catch(error =>
      errorCallback ? errorCallback(error) : console.error(error),
    )
}
// 使用时在回调里做类型判断
get(
  "/route",
  (response) => console.log(response),
  (error) => {
    if (error instanceof Error) {
      console.error(error.message);
    } else {
      console.error(String(error));
    }
  }
);

方案2：类型断言（谨慎使用） #

如果你能确定捕获的error一定是object类型，可以添加类型断言绕过检查：

.catch(error =>
  errorCallback ? errorCallback(error as object) : console.error(error),
)

但这种方式会跳过TypeScript的类型检查，若实际错误不是object类型，可能引发运行时问题，不推荐随意使用。

回调类型的正确定义方式 #

为了代码可读性和可维护性，建议用类型别名或接口定义回调类型：

// 定义回调类型别名
type SuccessCallback = (response: object) => void;
type ErrorCallback = (error: Error) => void;

export const get = (
  route: string,
  callback: SuccessCallback,
  errorCallback: ErrorCallback,
) => {
  // ... 函数逻辑
}

如果接口返回的response有固定结构，也可以定义更具体的接口：

interface ApiResponse {
  code: number;
  data: any;
  message: string;
}

type SuccessCallback = (response: ApiResponse) => void;

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