How to get types for values from objects in an array when the objects don't all have the same keys in TypeScript?

Question

Say I have the following array:

const a = [
  {
    id: 1,
    title: 'Z'
  },
  {
    id: 2,
  },
  {
    id: 3,
    title: 'Y'
  },
] as const

I'm trying to derive a type that is the union type of the title keys if they exist, e.g. 'Z' | 'Y'. I am at a loss as to how to accomplish this though.

I've tried extracting the types using bracket notation, but because the keys aren't on every object, the type is any.

// The type here is `any`
type Titles = typeof a[number]['title']

I've tried handling this with conditional types as well, but I'm really out of my depth there and can't get it to work.

This question is kinda related. Hopefully you can take my answer and make it work for your needs. — k.tten
– k.tten, Commented Mar 23, 2022 at 18:39
Thanks @kellys! That got me mostly there. It's bewildering why something so seemingly simple should take so much type gymnastics. — Ray Gesualdo
– Ray Gesualdo, Commented Mar 23, 2022 at 18:47

Lesiak · Accepted Answer · 2022-03-23 19:09:42Z

4

You were almost correct, but property 'title' does not exist on every member of type typeof a[number].

You can filter union members with Extract utility type.

type AElem = typeof a[number];
type AElemWithTitle = Extract<AElemWithTitle, {title: string}>;
type ATitles = AElemWithTitle['title']

Playground link

edited Mar 23, 2022 at 19:09

answered Mar 23, 2022 at 19:04

Lesiak

26.5k2 gold badges54 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

k.tten Over a year ago

Very nice! Extract is always one of those types I forget existed. @ray-gesualdo should accept this as the answer.

Ray Gesualdo Over a year ago

Thanks @Lesiak! That was exactly what I was looking for! For posterity, here's my final solution with a single type used to pull the values: Playground link

Collectives™ on Stack Overflow

How to get types for values from objects in an array when the objects don't all have the same keys in TypeScript?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related