reactjs - TypeScript/React - Iterando sobre un arreglo de objetos

Estoy tratando de mapear sobre un array de objetos recibido de la API de Unsplash. He leído un poco sobre los indexadores en TypeScript, pero no estoy seguro de comprenderlo completamente. Tengo un componente React sin estado que recibe una prop de estado del componente padre. El valor es un array de objetos. (ver ejemplo de la API de Unsplash). ¿Cómo defino la forma del objeto recibido de la API?

Mi código:

interface IProps {
    images: [{}];
}

interface IIMageUrls {
    image: {
        urls: { regular: string}
    }   
    [index: string]: any;
}

export default class ImageList extends React.Component<IProps, {}> {
    constructor(props: IProps) {
        super(props);
    }

    render() {
        this.props.images.map((image: IIMageUrls) => {
            return <img src={image.urls.regular} />
        });
    }
}

Ejemplo del JSON de unsplash:

{      
  "results": [       
      "urls": {
        "raw": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",
        "full": "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",
        "regular": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=92f3e02f63678acc8416d044e189f515",
        "small": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=263af33585f9d32af39d165b000845eb",
        "thumb": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=8aae34cf35df31a592f0bef16e6342ef"
      }
   ]
}

Solución/Código Final:

interface IImageUrls {
    [index: string]: string;
    regular: string;
}

interface IImage {
    urls: IImageUrls;
}

interface IProps {
    images: Array<IImage>;
}

export default class ImageList extends React.Component<IProps, {}> {
    constructor(props: IProps) {
        super(props);
    }

    render() {
        const images = this.props.images.map((image, index) => {
            return <img src={image.urls.regular} key={index} />;
        });
        return images;
    }
}

Respuesta #1

Parece que estás buscando algo como esto:

interface IImageUrls {
  [index: string]: string
}

interface IImage {
  urls: IImageUrls;
}

interface IProps {
  images: Array<IImage>;
}

La propiedad urls de IImage necesita la firma de índice.

Si sabes que regular siempre estará allí, puedes usar:

interface IImageUrls {
  [index: string]: string;
  regular: string;    
}

Básicamente diciendo que esta interfaz siempre tiene regular, pero puede tener otras claves.

Depende de cómo necesites usar IImageUrls. Si solo necesitarás regular, entonces no necesitas la firma de índice y podrías simplemente escribirlo como:

interface IImageUrls {
  regular: string;    
}