TypeScript联合类型判断时报'id'属性不存在错误该如何解决？

TypeScript 无法直接访问联合类型中仅存在于单个类型上的属性，你需要先对联合类型做类型收窄，让TS明确知道当前res的具体类型，可选修复方案如下：

方案1：编写类型守卫函数（最推荐） #

单独封装可复用的类型判断逻辑，适合多处需要区分这两个类型的场景：

// 定义类型守卫函数，返回值为类型谓词
function isUser(res: User | ErrorResponse): res is User {
  return 'id' in res
}

// 改造redirect函数
const redirect = (res: User | ErrorResponse, redirectTo: string) => {
  // 先判断类型，再判断id不为undefined（因为你的id定义为可选属性）
  if (isUser(res) && res.id) {
    router.push({ name: redirectTo })
  } else {
    ElMessage.error('Oops, this is a error message.')
  }
}

方案2：直接用in操作符做临时收窄 #

如果只是单次判断，不需要复用逻辑，可以直接在判断语句中用in语法触发TS自动类型收窄：

const redirect = (res: User | ErrorResponse, redirectTo: string) => {
  if ('id' in res && res.id) {
    router.push({ name: redirectTo })
  } else {
    ElMessage.error('Oops, this is a error message.')
  }
}

方案3：改造为可辨识联合（长期维护更友好） #

如果后续业务迭代中这两个类型会新增很多属性，建议给两个类型加统一的辨识字段，避免后续出现同名属性导致判断逻辑失效：

// 调整类型定义，新增公共辨识字段
export interface User {
  type: 'user'
  id?: number
}

export interface ErrorResponse {
  type: 'error'
  status: number
  errors: object
}

// 改造判断逻辑
const redirect = (res: User | ErrorResponse, redirectTo: string) => {
  if (res.type === 'user' && res.id) {
    router.push({ name: redirectTo })
  } else {
    ElMessage.error('Oops, this is a error message.')
  }
}

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