Intersection Types

Combining multiple types into a single, merged super-type.

TypeScript3 min readConcept 11 of 54

The AND Operator for Types

While a Union (|) means 'one or the other', an Intersection (&) means 'both at the same time'.

When you intersect two object types, the resulting type is a single object containing all the properties from both original types.

Mixing and extending

Intersection types are incredibly useful for composition. Instead of writing massive, monolithic types, you can write small, focused types and combine them as needed.

For example, in React, you might combine native button props with your own custom props: type ButtonProps = React.ComponentProps<"button"> & { variant: 'primary' | 'secondary' };

Creating an Intersection

You define an intersection using the ampersand (&).

typescript type Name = { name: string }; type Age = { age: number }; type Person = Name & Age; // Person is equivalent to: { name: string; age: number } const p: Person = { name: "Alice", age: 30 };

Try it

Watch two separate types merge into a single, comprehensive super-type using the & operator.

type Name = { name: string };
type Age = { age: number };

// The & operator creates a single type with properties of both
type Person = Name & Age;
Name
{
  name: string;
}
Age
{
  age: number;
}
Person (Merged Type)
{
  name: string;
  age: number;
}
Both shapes are combined.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What happens if you intersect two object types that share a property key, but have incompatible primitive types for that property?

Remember this

  • An Intersection Type (A & B) creates a type with all the properties of both A and B.
  • They are excellent for composing small types into larger ones.
  • Conflicting primitives in an intersection result in a never type.
  • Prefer interface extends for object composition when possible.

Done with this concept?

Mark it complete to track your progress. No login needed.