How can I restrict property to accept only components with specific props?

I want to create a table with a custom filter component for each column. The filter component props should implement the FilterComponentProps interface. The filter component type and its props are stored for each column as FilteredTableColumn:

interface FilterComponentProps { accesor: string; value?: string; } interface FilteredTableColumn<T extends FilterComponentProps = FilterComponentProps> { accessor: string; filter?: { component: ComponentType<T>, props: T; } } interface StringFilterComponentProps extends FilterComponentProps { mask: string; } const StringFilterComponent: FunctionComponent<StringFilterComponentProps> = (props) => ( <input type="string" placeholder={props.mask} /> ); interface FilteredTableProps { columns: FilteredTableColumn[]; } const FilteredTable: FunctionComponent<FilteredTableProps> = (props) => ( <table> {props.columns.map(column => <td key={column.accessor}> {column.filter && <column.filter.component {...column.filter.props} /> } </td> )} </table> ); const cols: FilteredTableColumn<StringFilterComponentProps>[] = [{ accessor: "name", filter: { component: StringFilterComponent, props: { mask: "test", accesor: "name" } } }]; <FilteredTable columns={cols} />

And typing error:

Type 'FunctionComponent<StringFilterComponentProps>' is not assignable to type 'FunctionComponent<FilterComponentProps>'

I know the problem results from default FilteredTableColumn type. Without it FilteredTable should also be generic an so on. How can I restrict filter component: ??? property to only accept components which contains specific properties?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.