TypeScript结合VueJS使用时catch块做类型断言仍报类型错误如何解决

你出现类型错误的核心原因是断言的目标类型错误：原生TypeError是JS内置的标准错误类型，本身仅包含name、message、stack等基础属性，不存在你要访问的response属性，所以即使你做了类型断言，TypeScript依然会检测到你访问了类型上不存在的属性，抛出错误。

你需要根据错误的实际类型（大概率是HTTP请求库抛出的请求错误，比如AxiosError）调整处理逻辑，以下是几种可行方案：

方案1：使用请求库内置类型守卫（推荐，适配Axios场景） #

如果你用Axios发起请求，直接用Axios提供的类型和类型守卫做类型收窄，安全性最高：

import type { AxiosError } from 'axios'

// 其他逻辑
catch (err: unknown) {
  // 先做类型校验收窄类型
  if (err instanceof AxiosError) {
    const msg = err.response?.statusText
    // 你的后续业务逻辑
  } else {
    // 处理其他非请求错误的场景
    const msg = (err as Error).message
  }
}

方案2：自定义类型守卫（通用场景，不依赖请求库） #

如果不用Axios，或者需要兼容其他自定义错误类型，可以自己写类型守卫做收窄：

// 先定义你需要的错误结构
type RequestError = Error & {
  response?: {
    statusText?: string
  }
}

// 写类型判断函数
function isRequestError(err: unknown): err is RequestError {
  return typeof err === 'object' && err !== null && 'response' in err
}

// 其他逻辑
catch (err: unknown) {
  if (isRequestError(err)) {
    const msg = err.response?.statusText
  }
}

方案3：临时快速断言（不推荐，仅适合调试场景） #

如果只是临时调试需要快速绕过类型校验，可以先把错误断言为unknown再断言为你需要的结构，注意不要在生产代码中滥用：

catch (err) {
  const msg = (err as unknown as { response?: { statusText?: string } })?.response?.statusText
}

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