Naming of TypeScript's union and intersection types

Question

I can't understand the logic behind the terms union types and intersection types in TypeScript.

Pragmatically, if the properties of different types are sets of properties, if I combine them with the & operator, the resulting type will be the union of the of those sets. Following that logic, I would expect types like this to be called union types. If I combine them with |, I can only use the common properties of them, the intersection of the sets.

Wikipedia seems to back that logic:

The power set (set of all subsets) of any given nonempty set S forms a Boolean algebra, an algebra of sets, with the two operations ∨ := ∪ (union) and ∧ := ∩ (intersection).

However, according to typescriptlang.org, it's exactly the opposite: & is used to produce intersection types and | is used for union types.

I'm sure there is another way of looking at it, but I cannot figure it out.

Answer 1

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

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

But if you took the union of blue small things and red small things, only the smallness property is universal in the resulting set. Intersecting "blue small" with "red 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: