如何定义接受渲染回调的React函数并限定回调参数类型？

我想写一个接受渲染回调函数和对应参数的函数，要确保回调的参数是我自定义的类型。目前代码逻辑如下：

const render1 = (chip: string): React.ReactElement => {...}
const render2 = (chip: { name: string, email: string}): React.ReactElement => {...}

const values1 = ["test1", "test2", "test3"]
const values2 = [{name: "jim1" , email: "test@example.ca"}]

type chipTypes = string[] | { name: string, email: string }[];

type InputParams = {
  values: chipTypes;
  renderFun: (chip: ???) => React.ReactElement
}

我试过把两个渲染函数定义成联合类型，但这样每次都要在函数顶部加类型守卫，想避免这种情况。

解决方案：用泛型实现类型强绑定 #

核心是通过泛型让values的元素类型和renderFun的参数类型严格关联，TypeScript会自动推导类型，无需额外的类型守卫。

1. 先定义单个Chip的基础类型：

type Chip = string | { name: string, email: string };

2. 将InputParams改造为泛型类型，泛型参数代表单个Chip的类型：

type InputParams<T extends Chip> = {
  values: T[];
  renderFun: (chip: T) => React.ReactElement;
};

3. 使用时，TypeScript会根据values的类型自动匹配renderFun的参数类型：

// 传入string数组，renderFun参数自动为string
const params1: InputParams<string> = {
  values: values1,
  renderFun: render1
};

// 传入对象数组，renderFun参数自动为对应对象类型
const params2: InputParams<{ name: string, email: string }> = {
  values: values2,
  renderFun: render2
};

4. 若要定义接收该参数的组件/函数，同样用泛型：

function MyComponent<T extends Chip>(props: InputParams<T>) {
  return (
    <div>
      {props.values.map((chip, index) => (
        <div key={index}>{props.renderFun(chip)}</div>
      ))}
    </div>
  );
}

// 调用时自动推导类型，无需额外标注
<MyComponent values={values1} renderFun={render1} />
<MyComponent values={values2} renderFun={render2} />

这种方式的优势：

• 类型完全安全，values与renderFun参数类型严格对应，不会出现不匹配
• 无需手动编写类型守卫，TypeScript自动完成类型推导
• 扩展性强，后续新增Chip类型只需扩展Chip联合类型即可

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