How to expect a specific Typescript function template as an Angular component input

  Kiến thức lập trình

I have one Angular component which has the following input

@Input() filterColumnFunction?: FilterColumnFunction;

This function type is the following

export type FilterColumnFunction = <T>(columnFilters: { [key: string]: string }, items: T[]) => T[];

The given function to the component is

filterColumnFunction = (columnFilters: { [key: string]: string }, items: MyDto[]): MyDto[] => {
    return items.filter((item) => item.name === 'test');
};

but when I call the component with this function as input, I always get the following error

<my-component [filterColumnFunction]="filterColumnFunction"></my-component>

`Type ‘(columnFilters: { [key: string]: string }, items:
MyDto[]) =>
MyDto[]’ is not assignable to type
‘FilterColumnFunction’

I don’t understand why my function is not considered as the FilterColumnFunction type and what I can do to make this work ?

LEAVE A COMMENT