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

Question

假设我有一个定义如下的类型：

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

And I have a React component like this:

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

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

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

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

- fjplaurr

---

我认为在类型定义中设置cardWidth类型并将默认值设为你所做的方式是可以的。这不是重复的，因为一个是类型定义，另一个只是添加了默认值。只需在类型定义中添加一个Elvis运算符来标记它为可选项，例如cardWidth?: number，这样TS就不会抱怨缺少属性了。这里有一个演示。 - AWolf

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) }

- theFreedomBanana

Answer 2

您需要将接口中的任何可选属性定义为这样：

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

- 3066d0