Extend react.component and '&' sign

Question

What is the "&" sign in a class definition?

In my class I found out that I need the following class definition:

class myList extends Component<RouteComponentProps<any> & IMyList> {

I find many other examples with comma instead of &, but with comma I get the error:

prop x does not exist

instead of using an intersection type you should probably let IMyList extend RouteComponentProps<any> — Thomas
– Thomas, Commented Apr 23, 2019 at 10:41
@Thomas Not necessarily, either way will work for component props. & means intersection ie the props will be RouteComponentProps<any> and IMyList. Putting a , mean you are passing the other type parameter (for state) and thus props will be RouteComponentProps<any> and state will be IMyList — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Apr 23, 2019 at 10:56
@TitianCernicova-Dragomir I know that both ways will work. It just seems to me that the OP is very inexperienced. And although I'm confident that he will soon understand these types, I think that it is way easier for an inexperienced programmer to create a big mess and repeat yourself all over the place with this construct. That's why I recommend to use inheritance instead. — Thomas
– Thomas, Commented Apr 23, 2019 at 11:06
@Thomas Yes, from that point of view I agree, inheritance may be easier to grasp — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Apr 23, 2019 at 11:07

caruso_g · Accepted Answer · 2019-04-23 11:23:03Z

4

The & operator is called Intersection Type

It allows you to

...take two objects and create a new one that has the features of both these objects.

Think about it as "a type which is both typeA and typeB". I.E. a new type with properties from each object in the intersection type declaration.

P.S. I strongly suggest you to read the book in the link. It was very helpful for me.

answered Apr 23, 2019 at 11:23

caruso_g

4036 silver badges18 bronze badges

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

1 Answer 1