Derive a union type from an object

Sometimes you may need want to type an object which has several different optional keys, but all with the same type. We can map over a union type to accomplish this instead of chaining | in an object type.

I start with some code that looks like this


type SingleFruitCount =
  | {     
        apple: number;
    }
  | {
      banana: number;
  }
  | {
      pear: number;


export const fruitCount = {
  apple: 1,
  pear: 4,
  banana: 26,
}
type SingleFruitCount =
  | {
      apple: number
    }
  | {
      banana: number
    }
  | {
      pear: number
    }
const singleFruitCount: SingleFruitCount = {
  banana: 12,
}

Let's start improving this. First I will make a FruitCount type out of my fruitCounts object, then I'm going to make a new type called NewSingleFruitCount.


type FruitCounts = typeof fruitCounts
type NewSingleFruitCount = {
  [K in keyof FruitCounts]: {}
}

What this is doing is its taking each key in FruitCounts and setting its type to an empty object. So when I use it, TypeScript will be expecting a shape like this.


const singleFruitCount: NewSingleFruitCount = {
  apple: {},
  pear: {},
  banana: {},
}

But, I want the properties to be numbers.


type NewSingleFruitCount = {
  [K in keyof FruitCounts]: {
    [K2 in K]: number
  }
}

As you can see, if I just do that, I still haven't quite got a union type. I get this odd nested structure, and I will still have to have every possible fruit present.


const singleFruitCount: NewSingleFruitCount = {
  apple: {
    apple: 2,
  },
  pear: {
    pear: 4,
  },
  banana: {
    banana: 26,
  },
}

So, what I'm going to do is map over our NewSingleFruitCount type to get rid of those parent keys, and fully create my union type.


type NewSingleFruitCount = {
  [K in keyof FruitCounts]: {
    [K2 in K]: number
  }
}[keyof FruitCounts]

And with that, I can now assign our singleFruitCount how I'd like.


const singleFruitCount: NewSingleFruitCount = {
  apple: 2,
}

Transcript

0:00 Hello, folks. For this TypeScript tip, I'm going to show you how to change this fruitCounts object here into a union type. Imagine our code is a little bit crap at the moment because, really, we want to be deriving this type, this union of objects, from this object. I'm going to show you how to do it.

0:20 What we're going to do is we're going to name this NewSingleFruitCount, and I'm going to create a new type here, which is type NewSingleFruitCount. This is going to be an object. This is going to get a little bit funky here. First of all, I'm going to make a type out of this const up here, which is going to be type FruitCounts equals typeof fruitCounts.

0:44 Inside here, I'm going to go K in keyof FruitCounts is going to be...Let's, first of all, make it an object. This is going to be interesting because now, what we're going to have is fruitCounts is expecting this shape, where apple is now an empty object. In fact, it's even asking for apple is apple, which is an empty object or something crazy.

1:04 Essentially, what we have now is -- This is correct -- we're now looking for a shape like this. Inside, here we can specify anything and it will get put into here. We can say wow true, for instance, and now, all of these will require wow true. We don't want that. We actually want to take this key and we want to represent it as this apple number.

1:29 We're going to say K2 in K is a number. Now, each of these now require apple as a number. This is going to be 12, for instance, whatever. This is still not quite what we wanted. Even though we have all of this stuff represented, we've got this nice dynamic key here, it's still not quite a union.

1:50 To turn it into a union, all we need to do is map over these keys and essentially get rid of them. What we're going to do is just call these and say keyof FruitCounts. Maybe call isn't the right there. Now, what we have is we can have apple 2, and it satisfies it. There you go. This is how you turn a object type into a union.

Learn how to derive a union type from an object - an incredibly useful switcheroo that's at the heart of most TS magic out there.

Discuss on Twitter

More Tips

Use 'in' operator to transform a union to another union

Decode URL search params at the type level with ts-toolbelt

Use function overloads and generics to type a compose function

Use 'extends' keyword to narrow the value of a generic

Write your own 'PropsFrom' helper to extract props from any React component

Create your own 'objectKeys' function using generics and the 'keyof' operator

Use generics in React to make dynamic and flexible components

Create a 'key remover' function which can process any generic object

Throw detailed error messages for type checks

Use deep partials to help with mocking an entity

Create autocomplete helper which allows for arbitrary values

Turn a module into a type

Use 'declare global' to allow types to cross module boundaries

Use generics to dynamically specify the number, and type, of arguments to functions

Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig

Map over a union type

Know when to use generics

Assign local variables to default generic slots to dry up your code and improve performance

Use assertion functions inside classes

Get a TypeScript package ready for release to NPM in under 2 minutes

Understand how TypeScript infers literal types

Ensure that all call sites must be given value

Access deeper parts of objects and arrays

Use infer in combination with string literals to manipulate keys of objects

Compare function overloads and generics

Understand assignability in TypeScript

Avoid unexpected behavior of React’s useState

Conform a Derived Type Without Losing Its Literal Values

TypeScript 5.0 Beta Deep Dive

Don't use return types, unless...

How to Name your Types

TypeScript 5.1 Beta is OUT!

Type Predicates