如何访问声明为多接口联合类型的BehaviorSubject的全部属性

问题原因 #

你定义的BehaviorSubject泛型为联合类型INT1 | INT2 | INT3，这是TypeScript的默认类型保护机制：对于未明确类型的联合类型变量，只允许访问所有类型成员共有的属性，避免访问不存在的属性引发运行时报错，所以你现在只能访问共有的prop1属性。

解决方案 #

方案1：类型窄化（最推荐，保留类型校验能力） #

方式A：给接口增加可辨识属性

在三个接口中增加一个共同的枚举类字段作为类型标识，后续取值时可以通过该字段快速窄化类型：

export interface INT1 {
  type: 'int1'
  prop1: string;
  prop2: string;
}

export interface INT2 {
  type: 'int2'
  prop1: string;
  prop3: string;
}

export interface INT3 {
  type: 'int3'
  prop1: string;
  prop4: string;
}

取值时通过标识判断类型即可访问对应独有属性：

const currentVal = _mySub$.value;
if (currentVal.type === 'int1') {
  // 此处TypeScript会自动识别currentVal为INT1类型
  console.log(currentVal.prop2);
} else if (currentVal.type === 'int2') {
  console.log(currentVal.prop3);
} else if (currentVal.type === 'int3') {
  console.log(currentVal.prop4);
}

方式B：用in操作符直接窄化

如果不想修改原有接口定义，也可以直接通过判断属性是否存在来窄化类型：

const currentVal = _mySub$.value;
if ('prop2' in currentVal) {
  // 自动识别为INT1类型
  console.log(currentVal.prop2);
} else if ('prop3' in currentVal) {
  // 自动识别为INT2类型
  console.log(currentVal.prop3);
}

方案2：类型断言（适合明确知道当前值类型的场景） #

如果你100%确定当前BehaviorSubject存储的是某一个具体类型，可以直接用类型断言跳过类型校验：

// 断言为INT1类型
const currentVal = _mySub$.value as INT1;
console.log(currentVal.prop2);

注意：该方式会跳过TypeScript的类型检查，使用不当可能引发运行时错误，不建议频繁使用。

方案3：泛型封装 #

如果不同业务场景下返回的接口类型固定，可以将相关逻辑封装为泛型方法/类，从根源避免联合类型的歧义：

// 泛型方法示例
function getSubjectVal<T>(subject: BehaviorSubject<T>): T {
  return subject.value;
}

// 调用时指定类型
const val = getSubjectVal<INT1>(_mySub$);
console.log(val.prop2);

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