如何让TypeScript强制数组对象结构统一：全含或全不含iconName

你需要的是让TypeScript强制标签项数组要么所有元素都包含iconName，要么全不包含，无需额外传入variant参数。现有代码的问题在于，对单个元素的类型处理无法约束整个数组的一致性，可选的iconName属性会让混合情况通过校验。

解决方案1：联合类型直接约束数组结构 #

先定义两种基础标签项类型，再用联合类型限定数组只能是其中一种类型的集合：

// 纯文本标签项：仅包含label
type TabItemTextOnly = {
  label: string;
};

// 带图标标签项：包含label和必填的iconName
type TabItemWithIcon = TabItemTextOnly & {
  iconName: string;
};

// 标签数组类型：只能是全图标或全纯文本的数组
type TabItems = TabItemWithIcon[] | TabItemTextOnly[];

验证示例

// ❌ 错误：数组同时包含带图标和纯文本项，不符合TabItems类型
const mixedTabs: TabItems = [
  { iconName: "box", label: "storage" },
  { label: "memory" }, // TypeScript会抛出编译错误
];

// ✅ 全图标项，无错误
const iconTabs: TabItems = [
  { iconName: "box", label: "storage" },
  { iconName: "circle", label: "memory" },
];

// ✅ 全纯文本项，无错误
const textTabs: TabItems = [
  { label: "storage" },
  { label: "memory" },
];

解决方案2：泛型函数自动推断约束（推荐） #

如果需要基于已有接口扩展，或者让类型推断更自然，可以用泛型函数创建标签数组，自动约束元素结构一致性：

interface BaseTabItem {
  label: string;
  iconName?: string;
}

// 泛型函数：强制数组元素要么全有iconName，要么全没有
function createTabItems<T extends BaseTabItem[]>(
  items: T extends (infer U)[] 
    ? U extends { iconName: string } 
      ? (U & { iconName: string })[] 
      : Omit<U, 'iconName'>[] 
    : never
) {
  return items;
}

// ❌ 错误：混合模式不允许
const mixedTabs = createTabItems([
  { iconName: "box", label: "storage" },
  { label: "memory" },
]);

// ✅ 全图标项
const iconTabs = createTabItems([
  { iconName: "box", label: "storage" },
  { iconName: "circle", label: "memory" },
]);

// ✅ 全纯文本项
const textTabs = createTabItems([
  { label: "storage" },
  { label: "memory" },
]);

这种方案无需手动指定类型，函数会根据传入的数组自动推断并约束结构一致性，使用更简洁。

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