TypeScript联合类型GroupType遍历：VS Code类型提示异常及安全方案

当遍历GroupType类型的对象时，VS Code智能提示仅显示'Common'，核心原因是TypeScript的联合类型推断规则：联合类型对象的键类型会被收缩为所有联合成员共有的键。

具体来看，GroupA的键为'Common' | 'FieldA'，GroupB的键为'Common' | 'FieldB'，二者的交集只有'Common'。TypeScript无法在编译期确定传入函数的参数到底是GroupA还是GroupB，为了避免你访问仅存在于某一类型的键（比如给GroupB对象访问FieldA）导致运行时错误，智能提示只会展示所有成员都安全存在的键。

场景1：区分联合类型成员后遍历 #

如果需要针对不同分组的键做差异化处理，最安全的方式是通过类型守卫先区分参数类型，再针对性遍历：

// 类型守卫函数：判断对象是否为GroupA
function isGroupA(obj: GroupType): obj is GroupA {
  return 'FieldA' in obj;
}

function traverseGroup(obj: GroupType) {
  if (isGroupA(obj)) {
    // 此处obj已被收缩为GroupA类型，智能提示会显示Common和FieldA
    for (const key in obj) {
      console.log(key, obj[key]);
    }
  } else {
    // 此处obj已被收缩为GroupB类型，智能提示会显示Common和FieldB
    for (const key in obj) {
      console.log(key, obj[key]);
    }
  }
}

场景2：遍历所有可能的键（需运行时校验） #

如果需要遍历GroupA和GroupB的全部可能键，可以先定义全量键的联合类型，再结合运行时检查确保键存在：

// 定义GroupType的所有可能键
type GroupAllKeys = keyof GroupA | keyof GroupB;

function traverseAllKeys(obj: GroupType) {
  // 遍历所有可能的键，同时通过运行时检查避免访问不存在的属性
  (['Common', 'FieldA', 'FieldB'] as GroupAllKeys[]).forEach(key => {
    if (key in obj) {
      console.log(key, obj[key]);
    }
  });
}

注意：避免不安全的类型断言 #

不要直接用keyof GroupType做遍历，因为keyof GroupType本质就是'Common'，强制断言为其他键会带来运行时风险：

// 不推荐！存在运行时错误风险
function unsafeTraverse(obj: GroupType) {
  for (const key of Object.keys(obj) as (keyof GroupType)[]) {
    console.log(key, obj[key]);
    // 若obj是GroupB，key可能是FieldB，但TypeScript会误判为Common，导致类型提示错误
  }
}

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