如何指定React组件prop类型以关联引用另一个prop的类型？

你猜测的泛型组件思路完全可行，你之前的代码没有生效是因为仅给Props类型声明了泛型，没有将泛型参数绑定到组件实现层，导致TS默认使用any类型跳过了校验。

正确实现代码 #

泛型Props定义 #

和你之前写的基本一致，不需要额外修改：

import type { ReactElement } from 'react';

type MyComponentProps<ItemType> = {
  items: ItemType[];
  renderItem: (item: ItemType, index: number) => ReactElement;
};

泛型组件写法 #

两种常用写法都可以，根据你的代码风格选择：

1. 箭头函数写法（TSX环境下泛型参数后要加逗号，避免和JSX标签语法冲突）

const MyComponent = <ItemType,>({ items, renderItem }: MyComponentProps<ItemType>) => {
  return <div>{items.map((item, index) => renderItem(item, index))}</div>;
};

2. 普通函数声明写法（不需要加额外逗号）

function MyComponent<ItemType>({ items, renderItem }: MyComponentProps<ItemType>) {
  return <div>{items.map((item, index) => renderItem(item, index))}</div>;
}

类型校验效果 #

• 当传入类型匹配的props时，TS会正常通过校验：

const App = () => {
  const items: string[] = ['foo', 'bar'];
  const renderItem = (item: string, index: number) => <div>{item}</div>;
  // 无类型报错，可正常运行
  return <MyComponent items={items} renderItem={renderItem} />;
}

• 当items元素类型和renderItem参数类型不匹配时，TS会直接抛出类型错误：

const App = () => {
  const items: number[] = [1, 2];
  const renderItem = (item: string, index: number) => <div>{item}</div>;
  // 类型报错：number类型不能赋值给string类型
  return <MyComponent items={items} renderItem={renderItem} />;
}

类型对齐逻辑 #

不需要手动编写renderItem引用items类型的逻辑，TS的泛型自动推断会完成类型绑定：当你传入items属性时，TS会自动根据items的元素类型推导出泛型参数ItemType的实际类型，再反向校验renderItem的参数类型是否匹配，整个过程不需要显式指定任何类型，两个属性的类型会自动对齐。

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