Why don't I get all my properties when I use the & operator in TS?

Issue

I have an interface like this:

export interface ISizeAndColor {
  color: string;
  size: string;
  amount: string;
}

I want to add another object to it, the product_id. So when I make this:

selectedOptions: ISizeAndColor & { product_id: string; }[]

then I only have access to my product_id not the other properties. (When I map it, it is an array.) What I am doing wrong?

Solution

The brackets [] have a higher operator priority than the union operator &. Therefore if you want to have an array of your union type you’ll have to put it in braces:

selectedOptions: (ISizeAndColor & { product_id: string; })[];

Answered By – MrCodingB

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.