React+TypeScript组件中如何正确定义items数组类型的props

你原来的写法function EventList({ items :Item[]})不生效是因为：解构语法中冒号默认代表变量重命名语义，而非类型声明，TypeScript 无法将其识别为类型定义。

你可以选择以下任意一种方式实现类型定义，Item[] 类型本身就天然允许空数组，不需要额外做特殊处理：

方案1：单独定义Props接口（推荐，可维护性更高） #

先为整个组件的props对象定义类型接口，再绑定到组件参数上：

import React from "react";
import SingleEvent from "./SingleEvent";

interface Item {
  id: string;
  title: string;
  description: string;
  location: string;
  date: string;
  image: string;
  isFeatured: false;
}

// 新增组件Props类型定义
interface EventListProps {
  items: Item[]
}

// 为组件参数绑定Props类型
export default function EventList({ items }: EventListProps) {
  return (
    <ul>
      {items.map((item: Item) => (
        <SingleEvent key={item.id} {...item} />
      ))}
    </ul>
  );
}

如果需要兼容父组件未传入items的场景，可以将props定义改为可选属性，同时给items设置默认空数组兜底，避免调用map时报错：

interface EventListProps {
  items?: Item[] // 可选属性，允许不传入items
}

// 解构时设置默认值
export default function EventList({ items = [] }: EventListProps) {
  // 逻辑不变
}

方案2：内联类型定义（适合简单组件） #

如果不想单独定义Props接口，也可以直接在参数位置写内联类型：

export default function EventList({ items }: { items: Item[] }) {
  // 组件逻辑不变
}

内容的提问来源于stack exchange，提问作者margherita pizza