React Native泛型组件：如何为泛型T添加name默认类型？

直接上修改后的可行代码：

// 定义包含name属性的基础类型，作为泛型约束和默认值
type NamedItem = { name: string };

type GridProps<T> = {
  data: T[];
};

// 调整泛型参数：约束T必须包含name属性，同时设置默认类型为NamedItem
export function Grid<T extends NamedItem = NamedItem>({ data }: GridProps<T>) {
  const { sizes } = useTheme();

  return (
    <>
      <GridHeader>
        <Text content={`Encontrados ${data.length} items.`} color="gray-400" />
      </GridHeader>
      <FlashList
        numColumns={2}
        data={data}
        estimatedItemSize={data.length}
        renderItem={({ item, index }) => (
          <GridItem
            style={
              index % 2 === 0
                ? { marginRight: sizes[2] }
                : { marginLeft: sizes[2] }
            }
          >
            <Text content={item.name} />
          </GridItem>
        )}
      />
    </>
  );
}

关键修改说明： #

• 泛型约束修正：把T extends unknown改成T extends NamedItem，强制要求所有传入的T类型必须包含name属性，彻底解决item.name的类型报错。
• 默认类型设置：在泛型参数后添加= NamedItem，当使用Grid组件不指定具体泛型时，会自动使用这个带name属性的默认类型，满足你的需求。
• 类型复用：单独定义NamedItem类型，既作为约束又作为默认值，让代码更简洁易维护。

使用场景示例： #

1. 不指定泛型（用默认类型）：

<Grid data={[{ name: "商品A" }, { name: "商品B" }]} />

2. 指定自定义泛型（必须包含name）：

type Product = {
  name: string;
  id: number;
  price: number;
};

<Grid<Product> data={[{ name: "手机", id: 101, price: 3999 }]} />

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