typeerror - Konvertering til riktig type i en map-funksjon i TypeScript/React

Jeg har problemer med å kaste riktig type når jeg mapper over et objekt i TypeScript/React.

Jeg får følgende feil: Egenskapen 'urls' finnes ikke på typen 'object'. TS2339

Den eneste måten jeg kan fikse dette på er ved å sette hvilken som helst, noe jeg innser er veldig veldig dårlig.

Jeg prøvde å lage et grensesnitt med egenskapene som er til stede i objektet, men dette fungerte ikke.

Jeg er ny på TypeScript, så all hjelp vil være flott. Takk!

{images.map((image: object, key: number) => (
  <Image
    imageDesktop={image.urls.regular}
    imageMobile={image.urls.small}
    description={image.alt_description}
    author={image.user.name}
    url={image.links.html}
  />
))}

Tried useing this Interface to set type to replace object, but got this error:

Argument of type '(image: ImageType, key: number) => JSX.Element' is not assignable to parameter of type '(value: object, index: number, array: object[]) => Element'.
  Types of parameters 'image' and 'value' are incompatible.
    Type '{}' is missing the following properties from type 'ImageType': urls, alt_description, user, links  TS2345

interface ImageType {
  urls: {
    regular: string;
    small: string;
  };
  alt_description: string;
  user: {
    name: string;
  };
  links: {
    html: string;
  };
}

Svar #1

Det er to måter å gjøre dette på:

1. Bruk poster for objekter, som bilde:

   Record

Det betyr en post der nøkler er strenger og verdier kan være "hva som helst". I utgangspunktet er det definisjonen av JS-objekter. Bruk det hvis du bare vil at funksjonen din skal akseptere et objekt.

2. Definer en klasse med alle egenskapene til bildene dine og bruk klassenavnet som en type. Dette er en bedre løsning fordi du validerer hver egenskap.

Svar #2

1. du kan lage grensesnitt som passer bruken din på denne måten.

interface UrlType {
    regular: string;
    small: string;
}

interface UserType {
    name: string;
}

interface LinkType {
    html: string;
}

interface ImageType {
    urls: UrlType;
    alt_description: string;
    user: UserType;
    links: LinkType;
}

{
    // @ts-ignore
    images.map((image: ImageType, key: number) => (
        <Image
            imageDesktop={image.urls.regular}
            imageMobile={image.urls.small}
            description={image.alt_description}
            author={image.user.name}
            url={image.links.html}
        />
    ));
}

eller 2. du kan ignorere alle feil (men ikke anbefalt)

{
    // @ts-ignore
    images.map((image: object, key: number) => (
        // @ts-ignore
        <Image
            // @ts-ignore
            imageDesktop={image.urls.regular}
            // @ts-ignore
            imageMobile={image.urls.small}
            // @ts-ignore
            description={image.alt_description}
            // @ts-ignore
            author={image.user.name}
            // @ts-ignore
            url={image.links.html}
        />
    ));
}