How to declare a function parameter that takes multiple types in typeScript?

Question

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')}

Alon Yampolski · Accepted Answer · 2019-09-26 10:12:20Z

3

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

answered Sep 26, 2019 at 10:12

Alon Yampolski

8497 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

avani kothari Over a year ago

By doing so the error in function onHover()and getNewObject() persists because if I want to access the keys from object obj:Establishment | Cuisine | Category those keys needs to be common in all interfaces which is not possible here because Establishmsnts, Cuisines and Category have all different keys. So you see there are multiple errors I am facing.

x-magix Over a year ago

perfect answer, thanks.. I had problem over CaseType['participants'] | CaseType[] had to typed as (CaseType['participants'][0] | CaseType)[], your answer helped me

Collectives™ on Stack Overflow

How to declare a function parameter that takes multiple types in typeScript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related