Published on

What is Discriminated Union in TypeScript?

  • avatar
    Nico Prananta


  • what does 'discriminated union' mean?


  • A "discriminated union" (also known as a "tagged union", "variant", "sum type", or "union type" in various programming languages) is a data structure used to store values that could be of several different types. Only one of the types can be in use at any one time. It's a way to safely handle values of different types in a single, unified type.

The "discriminated" part comes from the fact that there's typically a "tag" or "discriminator" that indicates which type of value is currently stored in the union. This tag allows the program to safely interpret the stored value.

Here's a simple example in TypeScript, which supports discriminated unions:

type Shape =
  | { kind: 'circle'; radius: number }
  | { kind: 'rectangle'; width: number; height: number }
  | { kind: 'square'; sideLength: number }

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius * shape.radius
    case 'rectangle':
      return shape.width * shape.height
    case 'square':
      return shape.sideLength * shape.sideLength

const myCircle: Shape = { kind: 'circle', radius: 5 }
console.log(area(myCircle)) // Outputs the area of the circle

In the above example:

  • The Shape type is a discriminated union of three possible shapes.
  • The kind property acts as the discriminator.
  • The area function uses the kind property to determine which type of shape it's dealing with and calculates the area accordingly.

Discriminated unions are powerful because they allow for type-safe handling of different types in a unified manner. They are common in functional programming languages like Haskell and ML, but they've also found their way into more mainstream languages like TypeScript, Rust, and Swift.