TypeScript报错：'segmentObject'不存在于ViddlSegment类型中求助

错误原因 #

你在handleRowAdd里写的{segment}是错误写法——这会创建一个包含segment属性的对象（等价于{ segment: segment }），而非符合ViddlSegment接口的对象。TypeScript检测到该对象存在接口未定义的segment属性，因此抛出类型不匹配的错误。

修正代码 #

需要直接传入符合ViddlSegment类型的对象，同时建议给新对象生成唯一id，避免数组中出现重复标识：

const segment: ViddlSegment = {
  id: 0,
  viddlId: 0,
  from: 0,
  to: 0,
  include: true
}; 
const [segmentList, setSegmentList] = useState<ViddlSegment[]>([segment]);

const handleRowAdd = () => {
  // 基于初始segment创建新对象，用列表长度生成唯一id
  const newSegment = {
    ...segment,
    id: segmentList.length
  };
  // 将新对象直接加入数组
  setSegmentList([...segmentList, newSegment]);
};

补充说明 #

• 如果不需要修改初始segment的属性，也可以直接写setSegmentList([...segmentList, segment])，但这种写法会让数组内所有对象共享同一个引用，后续修改某条数据时可能意外影响其他条目，因此更推荐用扩展运算符...创建独立的新对象。
• 唯一id的生成方式可根据场景调整，比如使用时间戳、uuid库等，保证标识的全局唯一性。

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