TypeScript组件中无法访问泛型类型属性问题求助

错误原因 #

你声明的泛型<T,>没有任何类型约束，TypeScript无法确认所有传入的T类型都会包含value和label属性，因此会抛出Property 'value' & 'label' does not exist on type 'T'.ts(2339)错误。

解决方案：给泛型添加约束 #

不用在组件内硬编码固定类型，只需要给泛型T添加一个基础约束，确保它必须包含所需的属性即可：

1. 定义基础约束接口
   先声明一个接口，规定下拉选项必须具备的属性：

interface SelectOption {
  value: string;
  label: string;
}

2. 给组件泛型添加继承约束
   修改组件的泛型声明，让T继承上面的SelectOption接口：

export const FancyMultiSelect = <T extends SelectOption>({ values, className, onChange }: IFancySelectProps<T>) => {
  const [selected, setSelected] = useState<T[]>([]);
  
  const handleUnselect = (option: T) => {
    setSelected((prev) => prev.filter((s) => s.value !== option.value));
  };

  return (
    // 组件剩余渲染逻辑
    {selected.map((option) => (
      <Badge key={option.value} variant="secondary">
        {option.label}
      </Badge>
    ))}
  );
};

3. 同步更新Props类型
   对应的IFancySelectProps也需要加上泛型约束，确保传入的values符合要求：

interface IFancySelectProps<T extends SelectOption> {
  values: T[];
  className?: string;
  onChange: (selectedItems: T[]) => void;
}

这样修改后，你的FancyMultiSelect<frameworkType>依然可以正常使用（因为frameworkType满足SelectOption的约束），同时组件还能支持其他符合SelectOption结构的自定义类型，保持了通用性。

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