typescript 可以从 React 中的联合中分配基于索引的泛型类型吗？

Question

I have a React component that applies generic typings to props. Below is a simplified example:

interface Props<T> {
  data: T
}
const MyComponent = <T,>({ data }: Props<T>) => <div /> // output not important

Let's say I want to create a component, MyGenericList that iterates over an array of values (each index-based value could be different type) and renders MyComponent .

How can I type MyGenericList such that each iteration of MyComponent is typed based on the type of the index-based value? Here's what I've done so far, which doesn't work:

interface Props<T> {
  data: (keyof T[])[];
}
const MyGenericList = <T,>({data}: Props<T>) => {
  return (
    <>{data.map(d => <MyComponent<how to get index-based generic typing of 'd' here?> data={d} /></>
  );
}

The ideal consumption of MyGenericList would be like so:

<MyGenericList<string | number | string[]>  data={['someString', 45, ['string', 'string2']} />

Answer 1

I was able to get this working by doing:

interface Props<T> { data: T[][] };
const MyGenericList = <T,>({ data }: Props<T>) => (
  <>{data.map(d => <MyComponent<typeof d[0]> /> )}</>
)