Alternative to index signature

Question

I have an array of object like this:

[
  {
    "bio": "Douglas Gerald Hurley is an American engineer, former Marine Corps pilot and former NASA astronaut. He launched into space for the third time as commander of Crew Dragon Demo-2.",
    "images": {
      "png": "./assets/crew/image-douglas-hurley.png",
      "webp": "./assets/crew/image-douglas-hurley.webp"
    },
    "name": "Douglas Hurley",
    "role": "Commander"
  },
  {
    "bio": "Mark Richard Shuttleworth is the founder and CEO of Canonical, the company behind the Linux-based Ubuntu operating system. Shuttleworth became the first South African to travel to space as a space tourist.",
    "images": {
      "png": "./assets/crew/image-mark-shuttleworth.png",
      "webp": "./assets/crew/image-mark-shuttleworth.webp"
    },
    "name": "Mark Shuttleworth",
    "role": "Mission Specialist"
  },
  {
    "bio": "Pilot on the first operational flight of the SpaceX Crew Dragon to the International Space Station. Glover is a commander in the U.S. Navy where he pilots an F/A-18.He was a crew member of Expedition 64, and served as a station systems flight engineer.",
    "images": {
      "png": "./assets/crew/image-victor-glover.png",
      "webp": "./assets/crew/image-victor-glover.webp"
    },
    "name": "Victor Glover",
    "role": "Pilot"
  },
  {
    "bio": "Anousheh Ansari is an Iranian American engineer and co-founder of Prodea Systems. Ansari was the fourth self-funded space tourist, the first self-funded woman to fly to the ISS, and the first Iranian in space.",
    "images": {
      "png": "./assets/crew/image-anousheh-ansari.png",
      "webp": "./assets/crew/image-anousheh-ansari.webp"
    },
    "name": "Anousheh Ansari",
    "role": "Flight Engineer"
  }
]

I typed that with index signature:

    export type PlanetInfo = {
      [key: string]: string;
    }[];

but of course there are also the key "images" that are objects, I resolve that behaviour with:

    export type PlanetInfo = {
          [key: string]: any;
        }[];

but I don't think the use of 'any' is correct. Is there a better way?

Answer 1

Objectively answering your question, this is my go:

//if these are optional mark them so with `?` also if there are more formats you support you could add them here as well
type Image = {
 png: string,
 webp: string,
}
export type PlanetInfo = {
      [key: string]: string | Image;
    }[];

However I feel that your type is less "free" than what we just defined. What about :

type PlanetInfo = {
        bio: string,
        images: Image //same type as above,
        name: string,
        role: string, //maybe this one is an enum (can have only a set of values, check the api documentation of wherever you're getting this value
}[]