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

Question

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

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

我有一个这样的 React 组件:

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

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

Property 'cardWidth' does not exist on type 'gridProps'.ts(2339)

没错，但问题是:提供默认值 280 是否还不够？我觉得我通过提供 来复制代码号码 默认值和写号码 在 gridProps 类型中。有没有更好的方法来避免这种情况？

Answer 1

好吧，我知道您希望 TS 推断 cardWidth 属性类型，但不必为您的类型声明该属性。在这种情况下，您必须告诉 TS，您的类型有一个属性 cardWidth，因为 Object literals undergo excess property checking .
至于您应该/可以如何做到这一点，@aWolf 提到您可以将 cardWidth 设为可选:

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

如果您想离开 Type 精益，您也可以使用交叉点:

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

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