Typescript - Union vs Intersection types

Union Types

Multiple types can be defined on a value by using the | symbol. When a value is expected to have one of many known types, then using union type is the most suitable option (rather than any or unknown).

type value = number | boolean;

Here value can be either number or boolean.

We can also combine custom type using the union operator.

interface house {
  hasDoor: boolean;
  address: string;
}

interface building {
  hasLift: boolean;
  address: string;
}

type houseOrBuilding = house | building

const hb: houseOrBuilding

In above case hb can only access members that are common to all types in the union.

Intersection Types

Intersection types on the other hand are useful when we want to combine two or more types to create a custom type. The difference from Union Type is that the types create using intersection will have all members of the combined types. We use & symbol to combine types.

Lets reuse the above example,

interface house {
  hasDoor: boolean;
  address: string;
}

interface building {
  hasLift: boolean;
  address: string;
}

type houseAndBuilding = house & building

const hb: houseAndBuilding

The value hb needs to have all 3 properties (hasDoor, hasLift and address) to be a valid houseAndBuilding type.