Reputation: 739
I have a function that takes array which can be of 3 types, as one of its arguments. That function uses two more functions in chain to pass that array as parameter to those functions and use values from a particular index of that array. The array is array of objects:
renderFilters(title: string, filtersArray:Establishments[] | Cuisines[] | Category[] , filterName: string, filterType: string): ReactNode {
return (
...
filtersArray.map((obj: any, id: number) => {...}) // ERROR:This expression is not callable.
// Each member of the union type has signatures, but none of those signatures are compatible with each other.
{this.onHover(id, filtersArray, filterType)}
)
}
onHover(id: number, arr:Establishments[] | Cuisines[] | Category[], filterType: string) {
let obj:Establishments| Cuisines| Category = arr[id]; // object at index id
let fArr = arr;
fArr[id] = this.getnewFilterObj(filterType, obj);
...
this.setState({
establishmentList: fArr // ERROR: Types of property //'establishmentList' are incompatible.
// Type 'Cuisine[] | Category[] | Establishment[]' is not assignable to //type 'Establishment[]'.
})
}
private getnewFilterObj(type: string, obj: Establishments | Cuisines| Category) {
switch (type) {
case 'establishment':
return {
establishment: {
...obj.establishment, // ERROR: Property //'establishment' does not exist on type 'Cuisine | Category | Establishment'.
//Property 'establishment' does not exist on type 'Cuisine'.
hovered: !obj.establishment.hovered,
}
}
case 'category':
return {
categories: {
...obj.categories,
hovered: !obj.categories.hovered,
}
}
case 'cuisine':
return {
cuisine: {
...obj.cuisine,
hovered: !obj.cuisine.hovered,
}
}
default:
return obj;
}
}
in render()
function
{this.renderFilters('cuisine', this.state.cuisineList, 'cuisine_name', 'cuisne')}
{this.renderFilters('categories', this.state.categoryList, 'name', 'category')}
{this.renderFilters('establishment', this.state.establishmentList, 'name', 'establishment')}
Upvotes: 2
Views: 6483
Reputation: 849
You should define the array as following:
arr: (Establishments | Cuisines | Category)[]
This way it means that the array may contain items of all 3 types
Upvotes: 3