Приветствую, только начал знакомится с 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 с нужным типов, но не работает(
помогите разобраться