We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.

This lesson's interactive features are locked, please to keep using them

Intersections vs. Unions

So we've covered how unions (|) and intersections (&) are both used to smoosh types together... but which should you use?

Unions

  • Use the | operator (suspiciously similar to the logical OR operator)
  • Widen the resulting type (more possible values)
  • Useful for modeling mutually exclusive options or states

Intersections

  • Use the & operator (like logical AND)
  • Narrow the resulting type (fewer possible values)
  • Useful for combining multiple constraints or adding more required properties to existing types
type Human = {
  name: string;
  age: number;
};

type Elf = {
  name: string;
  ears: "pointy";
};

// Must have name, age, and pointy ears
type ElfHuman = Human & Elf;

// Must have name (shared between Human and Elf)
// Can have either age or ears (or both)
type ElfOrHuman = Human | Elf;
  • Use unions to say your type is "this OR that"
  • Use intersections to say your type is "this AND that", or sometimes more simply, "this with the additional properties of that"

Assignment

Support.ai stores information about different types of users who interact with support tickets. However, there's a problem, our SupportAgentUser type is impossible to use (incompatible never).