如何为组件的联合类型数组Props标注类型以实现正确类型检查

问题核心 #

你当前定义的LineChart/BarChart/DonutChart是三个独立的接口，组成联合数组后，TypeScript无法追踪每个元素内component和componentProps的类型关联——它会认为componentProps.data需要同时满足所有图表Props的data类型约束，导致必须用any断言才能通过检查。

解决方案：用泛型绑定组件与Props的类型 #

通过泛型约束，让TypeScript明确每个图表项的组件和对应的Props是严格匹配的，从而消除类型冲突。

步骤1：保留原有图表类型定义 #

import { FC } from 'react';

// 图表数据类型
type LineChartDatum = string;
type BarChartDatum = number;
type DonutChartDatum = {
  name: string;
  value: number;
};

type ChartDatum = LineChartDatum | BarChartDatum | DonutChartDatum;

// 基础图表Props
interface ChartProps<D extends ChartDatum> {
  data: D[];
}

// 各图表专属Props
interface LineChartProps extends ChartProps<LineChartDatum> {
  extraLineChartProp?: string;
}

interface BarChartProps extends ChartProps<BarChartDatum> {}

interface DonutChartProps extends ChartProps<DonutChartDatum> {}

// 切换枚举
export enum ChartCardSwitch {
  CURRENT = "current",
  WEEK = "week",
  QUARTER = "quarter",
}

步骤2：定义泛型绑定的图表项类型 #

// 泛型类型：强制组件与Props类型一一对应
type ChartItem<P extends ChartProps<ChartDatum>> = {
  key: ChartCardSwitch;
  component: FC<P>;
  componentProps: P;
};

// 卡片组件Props：支持1-3个图表项的联合类型数组
type CardProps = {
  // 严格限制1-3个图表（可选，也可以用Array<...>支持任意数量）
  charts: 
    | [ChartItem<LineChartProps>?]
    | [ChartItem<LineChartProps>?, ChartItem<BarChartProps>?]
    | [ChartItem<LineChartProps>?, ChartItem<BarChartProps>?, ChartItem<DonutChartProps>?];
};

步骤3：优化卡片组件渲染逻辑 #

此时TypeScript能正确推断component和componentProps的匹配关系，无需任何类型断言：

const Card: React.FC<CardProps> = ({ charts }) => {
  const [activeKey, setActiveKey] = useState<ChartCardSwitch>(
    charts[0]?.key || ChartCardSwitch.CURRENT
  );
  const activeChart = charts.find(item => item?.key === activeKey);

  return (
    <div className="card">
      {/* 图表切换器 */}
      <div className="selector">
        {charts.filter(Boolean).map(item => (
          <button key={item.key} onClick={() => setActiveKey(item.key)}>
            {item.key}
          </button>
        ))}
      </div>
      {/* 渲染选中的图表（无类型断言） */}
      <div className="chartContainer">
        {activeChart && <activeChart.component {...activeChart.componentProps} />}
      </div>
    </div>
  );
};

验证组件使用 #

原有的使用方式完全兼容，且类型检查自动通过：

// 示例图表组件
const LineChart: FC<LineChartProps> = ({ data, extraLineChartProp }) => (
  <div>折线图：{data.join(', ')} {extraLineChartProp && `(${extraLineChartProp})`}</div>
);

const BarChart: FC<BarChartProps> = ({ data }) => (
  <div>柱状图：{data.join(', ')}</div>
);

const DonutChart: FC<DonutChartProps> = ({ data }) => (
  <div>环形图：{data.map(item => `${item.name}: ${item.value}`).join(', ')}</div>
);

// 使用卡片组件
const App = () => (
  <Card
    charts={[
      {
        key: ChartCardSwitch.CURRENT,
        componentProps: {
          data: ['One', 'Two', 'Three'],
          extraLineChartProp: "extra",
        },
        component: LineChart,
      },
      {
        key: ChartCardSwitch.WEEK,
        componentProps: {
          data: [1, 2, 3],
        },
        component: BarChart,
      },
      {
        key: ChartCardSwitch.QUARTER,
        componentProps: {
          data: [
            { name: 'logs', value: 20 },
            { name: 'vulnerabilites', value: 30 },
          ],
        },
        component: DonutChart,
      },
    ]}
  />
);

方案优势 #

• 完全保留类型安全，无需任何any断言
• 组件使用方式与原有逻辑一致，无额外学习成本
• 泛型约束确保组件与Props的类型严格匹配，避免误用

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