TypeScript 如何根据props.group正确推断tab的联合类型？

现有类型定义没有把group配置和tabsList的元素类型建立强制绑定关系：

• 原代码里的ButtonTab是两种tab结构的松散联合，和group属性没有任何类型层面的关联
• TypeScript的类型窄化逻辑仅对同一个变量的属性判断生效，无法跨props.group和tab两个独立变量自动建立类型映射。因此即使在if分支中判断了props.group为真，编译器依然认为当前tab是包含两种结构的联合类型，访问不存在的属性就会触发类型报错。

要实现预期的关联推断效果，需要把ButtonTabsProps改造成可区分联合类型，让group的取值和对应tabsList的元素类型强绑定，让TypeScript可以自动完成类型匹配：

// 拆分两种场景下独立的tab类型定义
type GroupTab = {
  leftText: string;
  rightText?: string;
};
type NormalTab = {
  title: string;
};

// 用group作为判别字段，把props组合成可区分联合
type ButtonTabsProps =
  | {
      // group为true时，tabsList必须是GroupTab类型的数组
      group: true;
      tabsList: GroupTab[];
    }
  | {
      // group为false或不传时，tabsList必须是NormalTab类型的数组
      group?: false;
      tabsList: NormalTab[];
    };

function ButtonTabs(props: Readonly<ButtonTabsProps>) {
  return props.tabsList.map((tab) => {
    // TypeScript会自动根据props的联合类型，在分支里把tab收窄为对应类型
    if (props.group) {
      // 此时tab自动匹配GroupTab结构，可安全访问leftText、rightText
      return `${tab.leftText} ${tab.rightText ?? ""}`;
    }
    // 此时tab自动匹配NormalTab结构，可安全访问title
    return `${tab.title}`;
  });
}

• 改造后，TypeScript会在组件调用阶段就校验传入的tabsList是否和group配置匹配，从源头避免配置错配的问题，不需要等到组件内部运行时才暴露异常。
• 不需要在map回调中手动给tab标注类型，TypeScript会自动从tabsList的定义中推导出tab的准确类型。
• 可以在函数实现中给props.group补充默认值（比如props.group ?? false），类型层面已经覆盖了group可选为false的场景，不会出现类型不匹配的问题。

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