如何编写基于同一具体类型属性的泛型类型？

核心需求回顾 #

• 实现泛型组件ItemRow，接收模型对象、展示组件（Displayer）及该组件所需的额外props，封装重复样板代码
• 修复现有类型错误，全程保留TypeScript类型安全
• 当Displayer组件的必填额外props未传入时，触发TypeScript警告
• 禁止提前实例化Displayer组件（必须传递组件本身，而非已渲染的JSX元素）

错误实现示例（参考典型问题代码） #

// 存在的问题：类型模糊、无法检测缺失props、允许提前实例化组件
type ItemRowProps<T> = {
  item: T;
  displayer: React.ReactNode;
  extraProps?: any;
};

const ItemRow = <T,>(props: ItemRowProps<T>) => {
  return <div>{props.displayer}</div>;
};

// 使用时无类型校验：未传showAge也不报错，且直接传入了实例化的JSX
const UserDisplayer = ({ user, showAge }: { user: { name: string; age: number }; showAge: boolean }) => (
  <div>{user.name} {showAge && `(${user.age})`}</div>
);

<ItemRow item={{ name: "Alice", age: 30 }} displayer={<UserDisplayer user={{ name: "Alice", age: 30 }} />} />

正确实现方案 #

1. 定义严格的泛型Props类型

通过类型提取和约束，确保Displayer的props与传入的模型、额外props完全匹配：

import React from 'react';

// 提取组件的Props类型工具
type ComponentProps<T> = T extends React.ComponentType<infer P> ? P : never;

// ItemRow的泛型Props定义：
// T = 模型对象类型；D = Displayer组件类型（必须接收item:T和其他额外props）
type ItemRowProps<T, D extends React.ComponentType<{ item: T } & Record<string, any>>> = {
  item: T;
  displayer: D;
} & Omit<ComponentProps<D>, 'item'>; // 自动排除item字段（由ItemRow统一传入），仅需传剩余props

2. 实现类型安全的ItemRow组件

在组件内部拆分props，合并item和额外props后传递给Displayer：

const ItemRow = <T, D extends React.ComponentType<{ item: T } & Record<string, any>>>(
  props: ItemRowProps<T, D>
) => {
  const { item, displayer: Displayer, ...extraProps } = props;
  // 合并参数并传递给Displayer组件
  return <Displayer item={item} {...extraProps as ComponentProps<D>} />;
};

3. 使用示例与类型校验验证

// 定义模型类型
type User = { name: string; age: number };

// 定义Displayer组件（明确接收item和额外props）
const UserDisplayer = ({ item, showAge }: { item: User; showAge: boolean }) => (
  <div>{item.name} {showAge && `(${item.age})`}</div>
);

// ✅ 正确使用：传入模型、组件本身、必填的额外props
<ItemRow item={{ name: "Alice", age: 30 }} displayer={UserDisplayer} showAge={true} />

// ❌ 错误场景1：未传入showAge，TypeScript直接报错
// <ItemRow item={{ name: "Alice", age: 30 }} displayer={UserDisplayer} />
// 提示：类型缺少属性“showAge”

// ❌ 错误场景2：提前实例化Displayer（传入JSX元素），TypeScript报错
// <ItemRow item={{ name: "Alice", age: 30 }} displayer={<UserDisplayer showAge={true} />} />
// 提示：类型“JSX.Element”不能赋值给类型“ComponentType<{ item: User; } & Record<string, any>>”

关键特性说明 #

• 类型安全：通过ComponentProps提取Displayer的props类型，自动校验额外props的类型和完整性
• 禁止提前实例化：约束displayer为ComponentType而非ReactNode，确保必须传递组件本身
• 缺失props警告：ItemRowProps合并了Displayer的必填props（排除item），未传入时TypeScript直接抛出错误

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