Given the following, the parameter value
of the render method is typed as string | number
.
How can I make sure that it gets typed as T[dataIndex]
, which is string
?
type Col<T extends object, K extends keyof T = keyof T> = {
title: string;
dataIndex: K;
render: (value: T[K]) => ReactNode;
};
function Tab<T extends object>(list: T[], cols: Col<T>[]): JSX.Element {
return (
<table>
<thead>
<tr>
{cols.map(col => (
<th key={col.title}>{col.title}</th>
))}
</tr>
</thead>
<tbody>
{list.map((item, i) => (
<tr key={i}>
{cols.map(col => (
<td key={col.title} children={col.render(item[col.dataIndex])} />
))}
</tr>
))}
</tbody>
</table>
);
}
Tab(
[
{ id: 1, name: 'Hello' },
{ id: 2, name: 'World' }
],
[
{
title: 'Title',
dataIndex: 'name',
render: value => <span>{value}</span>
}
]
);