Typescript props could be array of string or array of object with specific key:values

Question

I have a prop that can be an array of strings of image URLs or can be an array of objects with some key-value pairs where some key-value pairs are required and some are optional.

How can I set the type so I can verify that I'm getting either of them

interface Image {
  url: string;
  thumbnail?: string;
}

export class Props {
  public image: string[] | Image[] = [];
}

I tried this but it didn't work!

the props image could be:

['url_1', 'url_2', '...']

or

[{ url: 'url_1' }, { url: 'url_2' }, { url: '...' }]

Answer 1

Try as below:

• Start name of any interface using 'I' before an actual name. It's used as best practices.

interface IImage {
    url: Object[],
    // This can get data in key-value pairs as below format:
      //  [{ 'url': 'https://www.google.com', 'url': 'https://www.twitter.com' }]
    thumbnail ?: string[]
}

interface IImage2 {
    url: string[],
    // This can get data as below format:
      // ['https://www.google.com', 'https://www.twitter.com' ..]
    thumbnail ?: string[]
}

export class Props {
    image: IImage;
    image2: IImage2;
}

Answer 2

You can do this simply :

interface Image {
  url: string[],
  thumbnail?: []
}

export class Props {
  public image: Image;
}