TS2339: высота свойства не существует в '{}', когда возможно уничтожение неопределенного объекта

Question

Я пытаюсь деструктурировать опциональную опору типа следующим образом:

export interface Props {
  style: object;
}

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

Но я получаю предупреждение о машинописи:

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

Как мне решить эту проблему?

Answer 1

Вы объявили style просто object, который также не имеет width или height.

Определите style с соответствующей информацией о типе. Например, если это свойство style элементов HTML, правильный тип будет CSSStyleDeclaration:

export interface Props {
    style: CSSStyleDeclaration;
}

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

На игровой площадке .

Но если это ваша собственная информация style, определите для нее тип с помощью width и height и используйте ее.

---

В комментариях вы пояснили, что используете React Native (не реагирует на браузеры) и это:

Возможно, оно не имеет ширины или высоты, и в этом случае я хочу, чтобы они были разрушены до неопределенного значения.

Это было бы быть:

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

... как минимум. Тот факт, что вы собираете другие свойства в newStyle, наводит на мысль, что вам может понадобиться нечто большее. Тот факт, что вы применяете значение по умолчанию, предполагает, что сам style должен быть помечен как необязательный (?).