TypeScript React泛型组件属性类型继承问题求助

你的核心问题在于SubComponent的泛型设计是单一全局类型约束：当前SubComponent<TFilter>要求所有columns数组中的元素共享同一个TFilter类型，但你传入的columns包含了两种不同的OptionSet类型（OptionsAB和OptionsCS），TypeScript无法找到一个能同时兼容这两种类型的TFilter，只能默认推断为unknown，导致类型检查完全失效。

修正方案 #

我们需要修改泛型设计，让每个column的optionSet和options类型独立匹配，不需要共享同一个全局泛型。具体来说，先定义单个列的类型约束，确保optionSet的泛型参数与options的类型严格一致，再让SubComponent接受由这些独立列组成的数组。

修正后的代码 #

interface OptionSet<T> {
  options: T[];
}

// 定义单个列的类型，强制optionSet的泛型与options类型匹配
type Column<U> = {
  optionSet: OptionSet<U>;
  options: U;
};

// SubComponent接受任意Column类型组成的数组，TypeScript会自动推断每个列的具体类型
export function SubComponent<T extends Column<unknown>[]>(props: { columns: T }) {
  return null;
}

interface OptionsAB {
  a: string;
  b: string;
}
interface OptionsCS {
  c: string;
  s: string;
}
const PropertiesAB: OptionSet<OptionsAB> = { options: [] };
const PropertiesCS: OptionSet<OptionsCS> = { options: [] };

export const MainComponent = () => {
  return (
    <SubComponent
      columns={[
        { optionSet: PropertiesAB, options: { a: "b", b: "s" } }, // 类型匹配，正常通过
        { optionSet: PropertiesAB, options: { a: "b" } }, // 报错：缺少必填属性b
        { optionSet: PropertiesCS, options: { a: "b" } }, // 报错：类型不匹配，需包含c和s属性
      ]}
    />
  );
};

关键变化说明 #

1. 新增Column<U>类型，明确约束单个列中optionSet的泛型参数U必须和options的类型完全一致。
2. SubComponent的泛型T改为约束为Column<unknown>[]，允许数组中包含任意符合Column约束的元素，TypeScript会自动为每个元素推断对应的U类型。
3. 移除了原有的SubComponentProps接口，直接在函数参数中定义类型，让约束更直观。

这样修改后，TypeScript就能正确识别每个column的类型要求，实现你期望的错误提示效果。

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