如何为TypeScript中的new Set添加类型标注？

1. 为useState指定泛型类型 #

当你用new Set()作为useState的初始值时，TypeScript会默认推断为Set<never>，这会导致后续对Set的操作（比如add/delete）报错。因此需要显式指定Set存储的元素类型（比如number或string，根据业务场景调整）：

// 示例：存储数字类型的ID
const [selectedIds, setSelectedIds] = React.useState<Set<number>>(new Set([]));

2. 为函数参数添加类型标注 #

函数onSelect的参数selectedIds类型要和useState中定义的Set类型保持一致，同时给函数内用到的selectedId也添加对应类型：

const onSelect = (selectedIds: Set<number>, selectedId: number) => {
  const newSelectedIds = new Set(selectedIds);

  if (selectedIds.has(selectedId)) {
    newSelectedIds.delete(selectedId);
  } else {
    newSelectedIds.add(selectedId);
  }
  setSelectedIds(newSelectedIds);
};

3. 组件Props中的类型标注 #

如果要把Set类型作为组件Props传递，直接在Props接口中定义对应的Set类型即可：

interface MyComponentProps {
  selectedIds: Set<number>;
  onSelect: (selectedIds: Set<number>, selectedId: number) => void;
}

const MyComponent = ({ selectedIds, onSelect }: MyComponentProps) => {
  return <div>已选ID数量：{selectedIds.size}</div>;
};

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