Get type of item in optional array

[winsvold]

Hi, love this project 😄

I've used the code gen to generate types, and one of my generated document types looks like this:

export interface MyDocument extends SanityDocument {
  _type: "events";
  events?: Array<
    SanityKeyed<{
      _type: "event";
      time?: string;
      description?: string;
    }>
  >;
}

Now in my app I want to create a component that renders one single event, and I want to extract the type like this:

function MyComponent(props: MyDocument['events'][number]) {
  return (
    <div>
      {props.time}
      {props.description}
    </div>
  )
}

But since the MyDocument['events']-array is optional it doesn't work. Do you have any suggestions as to how I can dig out this type?

The error I get looks something like this:

Type '({ _type: "event"; time?: string | undefined; description?: string | undefined; } & { _key: string; })[] | undefined' has no matching index signature for type 'number'.ts(2537)

[ricokahler]

hi there!, thanks for the kind words.

I have two potential solutions for you:

1. you could go into your schema field and add codegen: { required: true }. This will make the codegen assert your field as required (this will not be enforced so be careful to add the corresponding validation too.

export default {
  name: 'myDocument',
  type: 'document',
  fields: [
    {
      name: 'aRequiredField',
      type: 'string',
      // 👇👇👇
      codegen: { required: true },
      validation: (Rule) => Rule.required(),
      // 👆👆👆
    },
  ],
};

2. you could create a typescript helper that allows you to reach into the object. I have made helpers like this before.

type MyDocument = { events?: Array<{_type: 'something'}> }

type SafeIndexedAccess<
    T extends { [key: string]: any } | undefined,
    K extends keyof NonNullable<T>,
  > = T extends undefined ? NonNullable<T>[K] | undefined : NonNullable<T>[K];

type Props = SafeIndexedAccess<MyDocument['events'], number>
// results in: type Props = { _type: 'something'; } | undefined

ts playground link

or without the helper 🤷:

type Props = NonNullable<MyDocument['events']> | undefined;

[winsvold]

Wow that was fast, the SafeIndexedAccess-helper was exactly what I needed, thank you so much!

And impressive typescript skills, kudos 🥳