如何解决TypeScript联合类型中属性不存在的类型检查错误？

针对你遇到的联合类型CellDetails | ContentCellUpdate无法直接访问button属性的问题，不需要给ContentCellUpdate添加冗余属性，以下是几种更合理的解决方案：

1. 使用in操作符做类型守卫 #

TypeScript支持通过in操作符自动缩小类型范围，直接在判断里检查属性是否存在：

if ('button' in cell) {
  // 这里TypeScript会自动推断cell为CellDetails类型，可安全访问button
  console.log(cell.button);
}

2. 自定义类型谓词函数 #

如果需要在多个地方做这个类型判断，可以封装一个类型守卫函数，让逻辑更清晰：

function isCellDetails(cell: CellDetails | ContentCellUpdate): cell is CellDetails {
  // 通过检查button属性是否存在来判断类型
  return 'button' in cell;
}

// 使用方式
if (isCellDetails(cell)) {
  // 此处cell已被推断为CellDetails类型
  handleButton(cell.button);
}

3. 类型断言（不推荐） #

如果能确保当前场景下cell一定是CellDetails类型，可以临时用类型断言绕开检查，但这种方式会失去TypeScript的类型保护，不建议常规使用：

if ((cell as CellDetails).button) {
  // 此处需自行保证cell确实是CellDetails类型，否则可能运行时出错
}

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