Naming of TypeScript's union and intersection types

Here's another way to think about it. Consider four sets: Red things, blue things, big things, and small things.

If you intersect the set of all red things and all small things, you end up with the union of the properties -- everything in the set has both the red property and the small property.

But if you took the union of red small things and blue small things, only the smallness property is universal in the resulting set. Intersecting "red small" with "blue small" produces "small".

In other words, taking the union of the domain of values produces an intersected set of properties, and vice versa.

In image form:

The type A | B refers to objects which are either A or B. In other words, values of such type are drawn from the union of values for A and values for B.

The type A & B refers to objects which are both A and B. In other words, values of such type are drawn from the intersection of values for A and values for B.

The naming and semantics are identical in other languages such as C++.

The confusion here probably stems from how we imagine the sets, namely, thinking of the intersection/union as involving the members of types as opposed to the types themselves. I put together a graphic that hopefully clarifies the concept: