创建扩展两接口之一的泛型可迭代类型遇TypeScript报错求助

基础约束版本（支持单个接口/子类型/联合） #

若要让泛型T仅能是BreadcrumbsItemProps、BreadcrumbsBaseItemProps或它们的子类型（含两者联合），直接在泛型约束中指定联合类型即可：

// 先确保两个基础接口可导出
export interface BreadcrumbsItemProps { /* 接口定义 */ }
export interface BreadcrumbsBaseItemProps { /* 接口定义 */ }

export type BreadcrumbsChildren<T extends BreadcrumbsItemProps | BreadcrumbsBaseItemProps> = Iterable<T>;

使用示例：

// 合法：T为BreadcrumbsItemProps
const itemList1: BreadcrumbsChildren<BreadcrumbsItemProps> = [{ id: 1 }];

// 合法：T为BreadcrumbsBaseItemProps
const itemList2: BreadcrumbsChildren<BreadcrumbsBaseItemProps> = [{ label: "Home" }];

// 合法：T为两者的联合类型
const itemList3: BreadcrumbsChildren<BreadcrumbsItemProps | BreadcrumbsBaseItemProps> = [{ id: 1 }, { label: "Home" }];

严格单接口版本（禁止联合类型） #

如果需要强制T只能是两个接口中的某一个（不允许传入联合类型），可以通过条件类型实现：

export type BreadcrumbsChildren<T extends BreadcrumbsItemProps | BreadcrumbsBaseItemProps> = 
  [T] extends [BreadcrumbsItemProps] ? Iterable<T> :
  [T] extends [BreadcrumbsBaseItemProps] ? Iterable<T> :
  never;

此时传入联合类型会触发类型错误：

// 报错：类型“BreadcrumbsItemProps | BreadcrumbsBaseItemProps”不满足约束“never”
const invalidList: BreadcrumbsChildren<BreadcrumbsItemProps | BreadcrumbsBaseItemProps> = [];

原代码问题解析 #

1. 语法错误：你写的(T extends BreadcrumbsItemProps) | (T extends BreadcrumbsBaseItemProps)不是合法的TypeScript类型表达式，条件类型需遵循X extends Y ? A : B的语法结构。
2. TS4081错误：通常是因为BreadcrumbsItemProps或BreadcrumbsBaseItemProps是未导出的私有类型，确保这两个接口添加export修饰符，避免导出的类型依赖私有名称。

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