Может ли машинописный текст назначать обобщенные c типы на основе индекса из объединения в React? - PullRequest
Новая
       21

Может ли машинописный текст назначать обобщенные c типы на основе индекса из объединения в React?

0 голосов
/ 03 августа 2020

У меня есть компонент React, который применяет общие c типизации к реквизитам. Ниже приведен упрощенный пример: 

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

Допустим, я хочу создать компонент MyGenericList, который выполняет итерацию по массиву значений (каждое значение на основе индекса может быть другого типа) и отображает MyComponent .

Как я могу ввести MyGenericList так, чтобы каждая итерация MyComponent набиралась на основе типа значения на основе индекса? Вот что я сделал до сих пор, но это не работает: 

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} /></>
  );
}

Идеальное потребление MyGenericList было бы таким: 

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

1 Ответ

0 голосов
/ 03 августа 2020

Мне удалось заставить это работать, выполнив: 

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