Typescript: why union types intersect properties and why intersection types merge them?

Hello everyone, today I’m going to talk some basics about the union types and integration types in Typescript, if you feel confident about them already please feel free to skip my blog.

I’m not gonna talk about how to use them or those kind of stuffs since the Typescript Handbook is much better place to go for

But I would like to try answering this blog’s title question instead!

Take a look at this code below

You can see that the union type (AorB) intersects properties from type A and type B while intersection type (AandB) unions them

I shamelessly confess to you guy that my first impression was that this might be TS’s bug which not so long later I realized I was so wrong

But why is that?

Yes, why is that!? alright I think we need recap our understanding of Typescript types a bit, let’s see what it means when we define

type A = { a: string, b: string }

Does it mean all the object variables assigned to type A can contains only a: string and b: string properties?

The answer is not really

It actually means all of them should contain at least those properties

So these objects are super valid to be assigned to type A

The way I see it now when I see the type like type A is

Set of any objects that satisfies type A constraints
(need at least a: string and b: string properties in this case)

The same goes for type B and the rest in Typescript (and possibly everything that follows Type theory)

(note: based on what we learnt above you can also see that the type is actually defined by constraints not its name, the name we give it is just the alias of it so type A1 = { z: string } and type B1 = { z: string } are the same type)

How to apply this knowledge to the union and intersection types?

Now you can imagine when you do the union

type AorB = A | B // become new type called AorB

It means you union all the members of set A and set B together

Basically all below objects that fit into the new type AorB (we union (select all the members of A and members of B sets) them)

As you can see they need to contain at least the property b: string

So when you try read the value of variable AorB it might seem like you intersect the properties of two types (please note here that it doesn’t mean that AorB could be assigned by any object that contains at least property `b: string`, you still need to assign with a member of A or B)

How about type AandB = A & B?

Given the same example members above we could then intersect (select only the members who fits into both A and B sets) them into this

In another word the new set/type contains only the objects that satisfies both type A and type B constraints

So we could say that when the types get intersected, they union all the constraints together

I hope this article can help someone who is stuck with this problem like I was!

Union set of A and B

Intersection set of A and B