TypeScript自定义类型守卫嵌套使用时类型收窄失效问题

这个问题的核心在于TypeScript无法从普通布尔返回值的函数推断出类型收窄逻辑，具体拆解来看：

• isB函数的返回类型是example is B——这是TypeScript的类型谓词（Type Predicate），它明确告诉TypeScript：当函数返回true时，传入的参数example一定是B类型。所以直接调用isB(this.x)时，TypeScript能正确完成类型收窄，让你安全访问b属性。
• 而cEqualsFoo函数的返回类型只是boolean，它没有向TypeScript传递任何“返回true意味着参数是B类型”的关联信息。哪怕你在函数内部调用了isB做类型检查，TypeScript也不会把内部的推断逻辑“透传”到外部调用场景中。所以外部判断cEqualsFoo(this.x)为true时，TypeScript依然认为this.x是A | B的联合类型，访问b、c属性自然会抛出类型错误。

方案一：给cEqualsFoo添加类型谓词返回类型 #

把cEqualsFoo的返回类型改成类型谓词，明确告诉TypeScript返回true时参数的具体类型：

// 方式1：断言为B类型（因为满足c===foo的前提必然是B）
export const cEqualsFoo = (example: A | B): example is B => {
  return isB(example) && example.c === "foo";
};

// 方式2：更精确的断言（同时限定c为固定值'foo'）
export const cEqualsFoo = (example: A | B): example is B & { c: 'foo' } => {
  return isB(example) && example.c === "foo";
};

修改后，当你在组件中判断cEqualsFoo(this.x)为true时，TypeScript会自动把this.x收窄为对应的类型，访问b、c属性就不会报错了。

方案二：先手动收窄类型再判断（不修改cEqualsFoo） #

如果不想改动cEqualsFoo的定义，可以先通过isB把类型收窄为B，再调用cEqualsFoo做属性判断：

if (isB(this.x) && cEqualsFoo(this.x)) {
    console.log(this.x.a);
    console.log(this.x.b); // 正常工作
    console.log(this.x.c); // 正常工作
}

额外优化：修正Vue Prop的类型定义 #

你原来的Prop类型写法可以简化得更准确：

x: {
    type: Object as PropType<A | B> // 直接用联合类型，不需要分开声明两个PropType
}

这样TypeScript能更清晰地识别x的类型是A或B的联合类型。

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