Type utils for tagged unions

[robinpokorny]

Tagged (aka discriminated) unions are a great way of expressing the business logic in types and making illegal states unrepresentable.

However, working with them could be tricky. That is until I discovered Distributive conditional types.

Let's say we have these types:

type Fish = {
    name: 'FISH'
    payload: object
    freshWater: boolean
    optionalProp?: string
}

type Cat = {
    name: 'CAT'
    payload:{
        kills: number
    }
    breed: string
    optionalProp?: string
}

type Pet =  Fish | Cat

I wanted to have a new union type that would only include name and payload from each member in Pet union. So I used Pick, but it did not work out as I wanted. It puts all together and creates a union for name and another one for payload.

type PlainPetPayload = Pick<Pet, "name" | "payload">
//   ^? type PlainPetPayload = { name: "FISH" | "CAT"; payload: object | {  kills: number; }; }

I expected a new tagged union, just with picked properties for each member. To do that you can do the following.

type DistributiveKeys<T> = T extends unknown ? keyof T  : never;
type DistributivePick<T, K extends DistributiveKeys<T>> = T extends unknown
  ? Pick<T, Extract<keyof T, K>>
  : never;

type DistrPetPayload = DistributivePick<Pet, "name" | "payload">;
//   ^? type DistrPetPayload = Pick<Fish, "name" | "payload"> | Pick<Cat, "name" | "payload">

Nice! This is what I wanted. It just takes a bit of TypeScript magic 😅

The DistributiveKeys could be also used, as normal keyof returns only the common properties.

type PetPlainKeys = keyof Pet
//   ^? type PetPlainKeys = "name" | "payload" | "optionalProp"
type PetDistrKeys = DistributiveKeys<Pet>
//   ^? type PetDistrKeys = "name" | "payload" | "freshWater" | "optionalProp" | "breed"

Links:

• TS Playground
• Distributive conditional types in TS 2.8 announcement
• Pick, Omit and union types in TypeScript