TypeScript：如何实现数组内不同泛型接口的类型兼容？

问题原因 #

当创建包含不同泛型ComponentValue<T>元素的数组时，TypeScript会自动将数组所有元素的泛型统一为第一个元素的T类型，导致后续元素的componentOptions类型与组件期望的泛型不匹配，触发类型错误。

解决方案 #

方法1：用辅助函数独立推断每个元素的泛型 #

创建泛型辅助函数，让TypeScript为数组中的每个元素单独推断泛型类型，避免强制统一数组类型。

import React from 'react';

// 带选项的函数组件类型
type FCWithOptions<T> = React.FC<{ options?: T }>;

// 组件选项定义
type ComponentAOptions = { a: string };
type ComponentBOptions = { b: number };

// 具体组件实现
const ComponentA: FCWithOptions<ComponentAOptions> = ({ options }) => (
  <div>ComponentA: {options?.a}</div>
);
const ComponentB: FCWithOptions<ComponentBOptions> = ({ options }) => (
  <div>ComponentB: {options?.b}</div>
);

// 组件项类型
type ComponentValue<T> = {
  component: FCWithOptions<T>;
  componentOptions?: T;
};

// 关键：辅助函数，为每个元素独立推断泛型
const createComponentItem = <T>(item: ComponentValue<T>) => item;

// 主容器组件
const MainComponent = ({ components }: { components: Array<ComponentValue<any>> }) => (
  <div>
    {components.map(({ component: Component, componentOptions }, idx) => (
      <Component key={idx} options={componentOptions} />
    ))}
  </div>
);

// 使用示例，无类型错误
const App = () => {
  const components = [
    createComponentItem({ component: ComponentA, componentOptions: { a: 'test' } }),
    createComponentItem({ component: ComponentB, componentOptions: { b: 123 } })
  ];
  return <MainComponent components={components} />;
};

方法2：显式声明数组为联合类型数组 #

如果能提前枚举所有可能的组件选项类型，可以直接将数组声明为联合类型数组，明确每个元素的合法类型：

// 定义所有可能的组件项联合类型
type ComponentItem = ComponentValue<ComponentAOptions> | ComponentValue<ComponentBOptions>;

// 声明数组类型
const components: ComponentItem[] = [
  { component: ComponentA, componentOptions: { a: 'test' } },
  { component: ComponentB, componentOptions: { b: 123 } }
];

方法3：弱化类型约束（仅在无需精确检查时使用） #

如果主组件只需要渲染组件、不需要访问componentOptions的具体属性，可以将数组类型声明为Array<ComponentValue<unknown>>，但会丢失类型校验能力：

const components: Array<ComponentValue<unknown>> = [
  { component: ComponentA, componentOptions: { a: 'test' } },
  { component: ComponentB, componentOptions: { b: 123 } }
];

核心原理 #

方法1的辅助函数通过为每个调用独立推断泛型T，让数组类型被自动推断为所有元素泛型类型的联合数组，而非强制统一为第一个元素的类型，从而解决类型不匹配问题。

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