Sum types, also called discriminated unions, are a powerful concept in TypeScript that allow you to model data with a finite set of possible shapes.

You can make sum types more concise and maintainable by using a a utility type.

If you're already using discriminated unions in TypeScript, you might be adding a type property to each variant. While this works, it can become repetitive and error-prone as your codebase grows. A helper type like SumType can automate this process, making your code more concise and maintainable.

Introducing SumType

The SumType utility type transforms a record of object types into a discriminated union. Here's the implementation:

export const type = Symbol("type");
export type SumType<T extends Record<string | symbol, object>> = Simplify<
  {
    [K in keyof T]: { [type]: K } & T[K];
  }[keyof T]
>;
type Simplify<T> = { [KeyType in keyof T]: T[KeyType] } & {};

This utility automatically adds a unique type property to each object in the record, eliminating the need to define it manually.

Why use a symbol for the type property?

Use a unique symbol for the type property to avoid potential conflicts with other properties. This approach ensures that the type property is distinct and doesn't interfere with a type property that might already exist on the object.

You can use ["type"] in place of [type] if you prefer using a string, but I recommended to use a symbol.

Example: Refactoring Shapes

Imagine you have some shapes defined as a discriminated union, you would typically write it like this:

type Shape =
  | { type: "rectangle"; width: number; length: number }
  | { type: "circle"; radius: number };

Using SumType, you can refactor this to the following:

type Shape = SumType<{
  rectangle: { width: number; length: number };
  circle: { radius: number };
}>;
  • Adding a new shape is as simple as adding a new property to the record.
  • Missing the type property will result in a compile-time error.
  • Duplicate type properties will also be caught.

You can also use unique symbols for each type to avoid conflicts between different sum types.

const rectangle = Symbol("rectangle");
const circle = Symbol("circle");
type Shape = SumType<{
  [rectangle]: { width: number; length: number };
  [circle]: { radius: number };
}>;

Exhaustive Checks Made Easy

With SumType, exhaustive checks in switch statements remain straightforward. Here's an example:

class ExhaustiveError extends Error {
  constructor(value: never) {
    super(`Exhaustive check failed for value: ${value}`);
    this.name = "ExhaustiveError";
  }
}

function area(shape: Shape): number {
  switch (shape[type]) {
    case "rectangle":
      return shape.width * shape.length;
    case "circle":
      return Math.PI * shape.radius ** 2;
    default:
      throw new ExhaustiveError(shape[type]);
  }
}

The type property added by SumType ensures that TypeScript enforces exhaustive checks, helping you catch missing cases at compile time. Or you can also use your favourite pattern matching library such as ts-pattern or arktype

ExhaustiveError takes a type never as an argument, which ensures that the error is thrown only when all cases are exhausted. This approach helps you catch missing cases early and avoid runtime errors while keeping your.

Thanks for reading, and consider refactoring your code to use this pattern for a cleaner and more scalable implementation of sum types in TypeScript. You are probaly already using sum types in your codebase, so why not make it more concise and maintainable with SumType?