如何处理TypeScript中联合类型（Iexpand|布尔值）变量的类型报错

数据老陈

2026-7-12

解决TypeScript联合类型访问属性报错问题

你遇到的问题是因为expand是Iexpand | boolean联合类型，TypeScript无法确定它当前到底是布尔值还是Iexpand对象，所以直接访问isChart会触发类型检查错误。要解决这个问题，需要通过类型守卫缩小类型范围，让TypeScript明确当前变量的具体类型。

以下是几种可行的解决方案：

1. 使用`in`操作符进行类型缩小

通过检查属性是否存在，让TypeScript自动推断出当前expand是Iexpand类型：

// 检查isChart属性是否存在于expand中
if ('isChart' in expand) {
  // 这里TypeScript确定expand是Iexpand类型，可以安全访问isChart
  expand.isChart = true;
} else {
  // 此处expand为boolean类型，处理布尔值逻辑
  expand = false;
}

2. 用`typeof`排除布尔类型

直接判断变量类型不是布尔值，剩下的就只能是Iexpand类型：

if (typeof expand !== 'boolean') {
  expand.isChart = false;
}

3. 自定义类型守卫函数

如果需要更严谨的类型判断（比如确保对象同时拥有isTitle和isChart属性），可以自定义类型守卫：

// 自定义类型守卫，判断对象是否符合Iexpand接口
function isIexpand(obj: Iexpand | boolean): obj is Iexpand {
  return typeof obj === 'object' && obj !== null && 'isTitle' in obj && 'isChart' in obj;
}

// 使用类型守卫
if (isIexpand(expand)) {
  expand.isChart = true;
} else {
  // 处理布尔值情况
}