在 Typescript 中使用默认值解构属性

Question

假设我有一个这样定义的类型：

type gridProps = {
  itemsArrayFiltered: object[],
  cardWidth: number,
  cardHeight: number
}

我有一个像这样的 React 组件：

const Grid = 
  ({ itemsArrayFiltered, cardWidth = 280, cardHeight }: gridProps) => 
(whatever)

如果我没有在 gridProps 类型中提供 cardWidth 属性，则会收到错误消息：

类型“gridProps”上不存在属性“cardWidth”。ts(2339)

这是正确的，但问题是：提供默认值 280 是否还不够？我觉得我通过提供数字默认值并在 gridProps 类型中写入数字来重复代码。有没有更好的方法来避免这种情况？

Answer 1

好吧，我知道您希望 TS 推断 cardWidth 属性类型，但不必为您的类型声明该属性。在这种情况下，您必须告诉 TS 您的类型具有属性 cardWidth，因为对象文字经过了过多的属性检查。至于你应该/可以如何做到这一点，@aWolf 提到你可以将 cardWidth 设置为可选：

 type gridProps = {
  itemsArrayFiltered: object[],
  cardWidth?: number,
  cardHeight: number,
}

如果你想让类型保持倾斜，你也可以使用交叉点：

type gridProps = {
  itemsArrayFiltered: object[],
  cardHeight: number,
}

const Grid = ({ cardHeight, cardWidth = 280, itemsArrayFiltered }: GridProps & { cardWidth?: number }) { (whatever) }