CODEWITHSUNDEEP
javascriptreactjstypescript
avani kothari
avani kothari

Reputation: 739

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

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

Answers (1)

Alon Yampolski
Alon Yampolski

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

Related Questions