TS2339：在解构可能未定义的对象时，“{}”上不存在属性高度答案

【问题标题】：TS2339: property height does not exist on '{}', when destructuring possibly undefined objectTS2339：在解构可能未定义的对象时，“{}”上不存在属性高度
【发布时间】：2020-08-08 22:31:55
【问题描述】：

我正在尝试像这样解构可选类型道具：

export interface Props {
  style: object;
}

const MyComponent: React.FC<Props> = ({ style }) => {
  const { width, height, ...newStyle } = style || {};

但我收到了打字稿警告：

TS2339: Property 'width' does not exist on type '{}'.

我该如何解决这个问题？

【问题讨论】：

您没想到吗？如果未定义样式，则您正在破坏一个确实既没有宽度也没有高度的对象。你不能有一个比对象更具体的类型吗？
如何在界面中定义样式以规避此警告？
那么 does style 有什么道具呢？除了你在这里展示的两个，我们不能告诉你。此外，无论界面中有什么，您的默认值也应该匹配。你不想“逃避”警告，TypeScript 会帮助你你的代码没有意义。
我编辑了这个问题。这是一个标准的 React Native 道具。这是一种风格。所有对象属性都是可选的。
IIRC 即使在默认情况下也有不止一种样式类型；例如，视图和文本具有不同的样式。但是如果所有的道具都是可选的，那么它可能没有有宽度和高度。

标签： reactjs typescript

【解决方案1】：

您已将style 声明为简单的object，它也没有width 或height。

使用适当的类型信息定义style。例如，如果这是 HTML 元素的 style 属性，则正确的类型是 CSSStyleDeclaration：

export interface Props {
    style: CSSStyleDeclaration;
}

const MyComponent: React.FC<Props> = ({ style }) => {
    const { width, height, ...newStyle } = style || {};
    // ...
};

On the playground.

但如果是您自己的style 信息，请使用width 和height 为其定义一个类型，然后使用它。

在 cmets 中，您已澄清您使用的是 React Native（不是浏览器上的 React），并且：

它可能没有宽度或高度，在这种情况下，我希望它们解构为未定义。

那就是：

interface Props {
    style: {
        width?: number;
        height?: number;
    }
}

...至少。您将其他属性收集到newStyle 的事实表明您可能需要更多。您应用默认值的事实表明 style 本身应标记为可选 (?)。

【讨论】：

谢谢。为了将来参考，我如何以及在哪里发现我需要CSSStyleDeclaration。那些列在 React Native 的某个地方吗？（顺便说一句，我需要ViewStyle）。
@raarts - 恐怕我不知道 React Native 的答案。对于 DOM 的东西，我查看了 HTMLElement 上声明的 style 类型是使用 TypeScript 操场的。 :-)