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.