TypeScript Generics: Переиспользуемый компонент?

Приветствую, только начал знакомится с TypeScript.
Хочу написать переиспользуемый компонент, чтобы в зависимости от переданного типа, рендерил список.
Для этой задачи подходит дженерики, вот что у меня получилось, но не работает:
interface Project {
  id: number,
  title: string,
  date: string
}

interface Education {
  id: number,
  title: string
}

interface Props<T> {
  items: T[],
  render: (items: T[]) => JSX.Element[]
}

const project: Project[] = [
  { id: 1, title: '1', date: '20.05.2017' },
  { id: 2, title: '2', date: '21.05.2017' }
]

const education: Education[] = [
  { id: 1, title: '1' },
  { id: 2, title: '2' }
]

function list<T extends Props>(props: T): JSX.Element {
  return (
    <div>
      {props.render(props.items)}
    </div>
  )
}

const renderProject = list<Props>({
  items: project,
  render: (items: Project[]) => items.map((item: Project) => <span>{item.title}</span>)
})

const renderEducation = list<Props>({
  items: education,
  render: (items: Education[]) => items.map((item: Education) => <span>{item.title}</span>)
})


export default list


Логика такая, есть 2 интерфейса Project и Education, есть 2 массива реализующих эти интерфейсы
Далее есть интерфейс Props, где используется дженерик для items, туда мы будем передавать массивы на основе Project и Education, а так же метод render, который получает этот же массив и рендерит его.
Соответственно реализация этого интерфейса в методе list, где T extends Props, что вызывает ошибку:
Generic type 'Props<T>' requires 1 type argument(s)


Чуть ниже 2 метода renderProject и renderEducation, которые выполняют метод list с нужным типов, но не работает(
помогите разобраться
  • Вопрос задан
  • 382 просмотра
Решения вопроса 1
Robur
@Robur
Знаю больше чем это необходимо
Как и сказано в ошибке - Props - это дженерик, и нельзя написать <T extends Props>, надо писать <T extends Props<Something>>

в list не надо передавать Props, в него надо передавать T который уже внутри использовать чтобы передать в Props
что-то в духе
function list<T>(props: Props<T>):
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы