在 TypeScript/React 的映射函数中转换正确的类型

Question

在 TypeScript/React 中映射对象时，我无法转换正确的类型。

我收到以下错误：“对象”类型上不存在属性“urls”。 TS2339

我能够解决此问题的唯一方法是设置任何，我意识到这是糟糕的糟糕。

我尝试使用对象中存在的属性创建一个接口，但这不起作用。

我是 TypeScript 的新手，所以任何帮助都会很棒。谢谢！

{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;
  };
}

Answer 1

有两种方法可以做到这一点：

1. 使用对象的记录，例如图像：

   记录

这意味着一个记录，其中键是字符串，值可以是“任何”事物。基本上是js对象的定义。如果您只想让您的函数接受对象，请使用它。

1. 使用图像的所有属性定义一个类，并使用类名作为类型。这是一个更好的解决方案，因为您验证了每个属性。

Answer 2

1. 您可以像这样创建适合您使用的界面。

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}
        />
    ));
}

或2.你可以忽略所有错误（但不推荐）

{
    // @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}
        />
    ));
}