TypeScript的catch块中如何正确定义AxiosError类型错误的属性类型？

TypeScript 4.0及以上版本中，catch 子句的捕获变量默认类型为 unknown，不允许直接声明为 AxiosError 类型，也不能直接访问变量的属性，这是你代码报错的核心原因。同时你原代码存在变量名不统一的问题：catch 参数定义为 err，后续调用使用的是 error，也会导致运行异常。

Axios 官方已经提供了内置的类型判断方法 axios.isAxiosError，可以直接实现类型收窄，不需要额外自定义逻辑：

import axios, { AxiosError } from "axios";

try {
  // 你的请求逻辑
  await axios.get("/api/your/interface")
} catch (err) {
  // 类型收窄，确认是Axios抛出的错误
  if (axios.isAxiosError(err)) {
    // 此处err自动被推导为AxiosError类型，可正常访问所有属性
    console.log(err.response)
    console.log(err.response?.data?.message)
    if(err.response?.data?.statusCode === 401) {
      logout()
    }
  } else {
    // 处理非请求类的其他异常
    console.error("其他错误：", err)
  }
}

如果你的接口错误返回有固定结构，需要进一步限定响应数据的类型，可以自己实现类型谓词：

import axios, { AxiosError } from "axios";

// 定义你的接口通用错误返回结构
interface ApiErrorResponse {
  statusCode: number
  message: string
}

// 自定义类型谓词，同时限定错误响应的data类型
function isBizError(err: unknown): err is AxiosError<ApiErrorResponse> {
  return (
    typeof err === "object"
    && err !== null
    && "isAxiosError" in err
    && (err as AxiosError).isAxiosError === true
  )
}

// 使用示例
try {
  await axios.get("/api/your/interface")
} catch (err) {
  if (isBizError(err)) {
    // 此处err.response.data会自动推导为ApiErrorResponse类型
    if (err.response?.data.statusCode === 401) {
      logout()
    }
  }
}

不要直接给catch的捕获变量做类型断言catch(err: AxiosError)，这种写法不符合TypeScript语法规范，catch变量仅支持声明为unknown或any类型，类型收窄必须放在块内实现才能保证类型安全。

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