Question

我正在尝试映射从Unsplash API接收的对象数组。我已经在TypeScript中阅读了有关indexers的内容，但不确定我是否完全理解。我有一个无状态的React组件，它从父级接收状态的支持。该值是一个对象数组。（请参阅unsplash API中的示例）。如何定义从API接收到的对象的形状？

我的代码：

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

unsplash JSON的示例：

{      
  "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"
      }
   ]
}

解决方案/最终代码：

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

Answer 1

看起来您正在寻找这样的东西：

interface IImageUrls {
  [index: string]: string
}

interface IImage {
  urls: IImageUrls;
}

interface IProps {
  images: Array<IImage>;
}

urls的{{1}}属性需要索引签名。

如果您知道IImage将一直存在，则可以使用：

regular

基本上说这个接口总是有interface IImageUrls { [index: string]: string; regular: string; }，但是可以有其他键。

这取决于您需要如何使用regular。如果您只需要IImageUrls，那么您就不需要索引签名，而只需将其键入为：

regular

TypeScript / React-在对象数组上映射

1 个答案: