Naming of TypeScript union and intersection types

I can't understand the logic behind the terms intersection types and union types in TypeScript. I'm thinking of interfaces (or classes) as sets of properties.

The logical conjunction operator & is equivalent to intersection in set theory, defined as:

The intersection of two sets A and B, is the set containing all elements of A that also belong to B

In TypeScript, an Intersection Type is also built using the & operator and is defined as:

The intersection type of interface Colorful and interface Circle is a new type that has all the members of Colorful and Circle

This is the exact opposite of how intersection is defined in mathematics and set theory.

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

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: