如何为嵌套对象属性定义TypeScript泛型以实现React组件Props的自动类型推断？

你说得没错，原来的泛型定义是作用在整个components对象的根级别，导致所有组件项都被约束为同一个泛型类型T，自然没办法为每个属性单独推断对应Component的Props类型。要实现逐个属性的类型推断，我们可以通过泛型辅助函数来让TypeScript分别处理每个组件项的类型，具体方案如下：

实现步骤 #

1. 定义单个组件项的类型：先为每个组件条目定义一个通用类型，确保props始终匹配对应Component的Props类型：

import React from 'react';

type ComponentEntry<T extends React.FC<any>> = {
  Component: T;
  props?: React.ComponentProps<T>;
};

2. 创建泛型辅助函数：通过泛型函数来约束整个组件对象的结构，同时让TypeScript自动推断每个属性对应的组件类型：

function createComponents<T extends Record<string, ComponentEntry<any>>>(components: T) {
  return components;
}

3. 使用辅助函数创建组件对象：现在你可以像之前一样编写组件配置，每个props字段都会自动获得对应Component的类型提示和校验：

// 示例组件（假设你已经定义了这些组件）
const Button: React.FC<{ color: 'red' | 'blue' }> = (props) => (
  <button style={{ color: props.color }}>{props.children}</button>
);
const Card: React.FC<{ variant: 'full-width' | 'compact' }> = (props) => (
  <div className={`card ${props.variant}`}>{props.children}</div>
);

// 自动推断每个props的类型
const components = createComponents({
  RedButton: {
    Component: Button,
    props: {
      color: 'red' // ✅ 正确匹配Button的Props类型，有类型提示
      // 如果尝试写color: 'green'会直接报错
    }
  },
  BlueButton: {
    Component: Button,
    props: {
      color: 'blue'
    }
  },
  FullWidthCard: {
    Component: Card,
    props: {
      variant: 'full-width' // ✅ 正确匹配Card的Props类型
    }
  },
});

为什么这个方案有效？ #

• 泛型函数的T会被TypeScript自动推断为整个components对象的类型，其中每个属性都对应各自的ComponentEntry类型。
• 对于每个组件项，React.ComponentProps<T>会精准提取对应Component的Props类型，从而实现props字段的自动类型提示和类型安全校验。
• 这种方式既保留了对象结构的灵活性（每个属性可以对应不同类型的组件），又确保了类型安全。

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