如何为含对象与同类型对象数组的数组编写TypeScript接口？

你需要用联合类型来兼容数组中的两种元素类型——单个PhotoProps对象，或者PhotoProps对象组成的数组。

1. 声明混合类型的数组 #

可以直接用联合类型定义变量类型，也可以把联合类型抽成别名方便复用：

// 已有的PhotoProps接口
export interface PhotoProps {
  urls: { sm: string|null; lg:string|null}
  id: string;
  alt: string;
  caption: string;
}

// 定义联合类型别名，代表单个PhotoProps或其数组
export type PhotoItem = PhotoProps | PhotoProps[];

// 给变量指定正确的类型
export const initialPhotoProps: PhotoItem[] = 
[
  {
    urls: {
      sm: "/assets/mobile/model_front.jpg",
      lg: "/assets/desktop/model_front.jpg",
    },
    id: "model-front",
    alt: "Model front photo",
    caption: "mcdayen",
  },
  [
    {
      urls: { sm: null, lg: "/assets/desktop/model_back.jpg" },
      id: "model-back",
      alt: "Model back photo",
      caption: "mcdayen",
    },
    {
      urls: { sm: null, lg: "/assets/desktop/model_back.jpg" },
      id: "model-back",
      alt: "Model back photo",
      caption: "mcdayen",
    },
  ],
  {
    urls: { sm: null, lg: "/assets/desktop/model_back.jpg" },
    id: "model-back",
    alt: "Model back photo",
    caption: "mcdayen",
  },
];

如果不需要复用类型，也可以直接简写为：

export const initialPhotoProps: (PhotoProps | PhotoProps[])[] = [/* ... */];

2. 遍历混合数组的类型安全处理 #

遍历的时候需要用类型守卫区分元素是单个对象还是数组，确保类型安全：

initialPhotoProps.forEach(item => {
  // 判断是否为数组，TypeScript会自动推断对应类型
  if (Array.isArray(item)) {
    // 此处item被推断为PhotoProps[]，可遍历内部元素
    item.forEach(photo => {
      console.log(photo.id, photo.alt);
    });
  } else {
    // 此处item被推断为PhotoProps，直接访问属性
    console.log(item.id, item.alt);
  }
});

之前使用PhotoProps[]报错的原因是：该类型要求数组的每一个元素都必须是PhotoProps对象，但你的数组中包含了PhotoProps[]类型的元素，类型不匹配，而联合类型可以同时兼容这两种元素类型。

内容的提问来源于stack exchange，提问作者hasina rajik