TypeScript中如何解决组件直接用业务类型报IntrinsicAttributes错误的问题

报错原因 #

React 组件的第一个入参永远是所有传入属性组成的 props 对象。你调用组件时写的 <AuctionCardGenerator auction={auction} /> 实际传入组件的是 { auction: 你的auction变量 } 这个对象，你原来的写法是从props对象中解构出auction字段，类型匹配。改写后你直接把入参声明为randomAuctionType，和实际传入的props对象类型不匹配，所以触发报错。

简单规避方法 #

不需要单独定义auctionType接口，直接内联声明props类型即可，有两种常用写法：

• 保持解构用法，组件内部逻辑无需修改

const AuctionCardGenerator = ({ auction }: { auction: randomAuctionType }) => {
  // 原有逻辑保持不变
}

• 不需要解构的写法，使用时加props前缀即可

const AuctionCardGenerator = (props: { auction: randomAuctionType }) => {
  // 访问属性写法示例：const title = props.auction.title
}

如果项目中习惯用React.FC定义函数组件，也可以用这种写法：

const AuctionCardGenerator: React.FC<{ auction: randomAuctionType }> = ({ auction }) => {
  // 原有逻辑保持不变
}

内容的提问来源于stack exchange，提问作者김일혁