Как типизировать универсальный React-компонент с дженериком?

Универсальный компонент принимает пропсы с параметром типа, чтобы сохранить связь между данными и функциями, которые с ними работают.

Пример списка

interface ListProps<T> {
  items: T[];
  getKey: (item: T) => string;
  render: (item: T) => React.ReactNode;
}

function List<T>({ items, getKey, render }: ListProps<T>) {
  return <ul>{items.map((item) => <li key={getKey(item)}>{render(item)}</li>)}</ul>;
}

<List
  items={[{ id: 'a', name: 'Ann' }]}
  getKey={(u) => u.id}
  render={(u) => u.name}   // u выведен как { id: string; name: string }
/>

В файлах .tsx

Стрелочная функция с <T> путается с JSX; пишут <T,> или <T extends unknown>, либо используют обычную function.

Коротко для собеседования

Параметр типа компонента выводится из пропсов и связывает items с колбэками. В .tsx для стрелочных функций добавляют запятую: <T,>.