TypeScript中多类型联合时访问可选属性报错如何处理？

报错根因 #

你定义的BlockTypes是三个接口的联合类型，其中CommentBlock不存在data属性，TypeScript 默认不允许直接访问联合类型中不是所有成员都共有的属性，同时可选链的深层访问不会自动触发类型收窄，因此直接写block?.data?.text会抛出类型错误。

最佳实现方案 #

方案1：自定义类型守卫（最推荐，可复用、类型安全） #

封装独立的类型判断函数，后续所有需要判断该类型的场景都可以复用：

// 类型守卫函数，返回值会告诉TS入参是不是带有text属性的Block类型
function isBlockWithText(block: BlockTypes): block is TitleBlock | SubtitleBlock {
  return 'data' in block && 'text' in block.data;
}

function mapper(block : BlockTypes) {
  if(isBlockWithText(block)){  
    // 进入分支后TS会自动把block收窄为 TitleBlock | SubtitleBlock
    console.log(block.data.text); // 无报错，可正常访问属性
  }
}

方案2：单层in判断逐层收窄（适合单次判断的轻量场景） #

不想单独封装守卫函数的话，可以在判断条件里逐层显式声明属性存在，触发TS类型收窄：

function mapper(block : BlockTypes) {
  // 先判断data存在，收窄排除CommentBlock，再判断text存在，收窄到目标类型
  if('data' in block && 'text' in block.data) {
    console.log(block.data.text); // 无类型报错
  }
}

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

如果确定运行时逻辑不会出问题，只是想绕开TS校验，可以用类型断言处理，但会丢失类型校验能力，不推荐正式代码使用：

function mapper(block : BlockTypes) {
  if((block as TitleBlock | SubtitleBlock)?.data?.text) {
    // 业务逻辑
  }
}

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