Почему машинописный текст сообщает об ошибке «Тип '{}' не имеет свойства» при деструктурировании объекта JS

Question

Я включил проверку типов в своем проекте JavaScript в Visual Studio Code. Я получаю сообщение об ошибке при попытке выполнить деструктурирующее задание:

const { foo } = this.state;

приводит к ошибке

[ts] Тип '{}' не имеет свойства 'foo' и не имеет подписи строкового индекса.

В то время как

const foo = this.state.foo;

работает нормально и не сообщает об ошибках.

Почему это происходит? Есть ли способ отключить это?

Answer 1

С помощью TypeScript мы расширяем класс React.Component<P,S> для создания компонентов React. Вы также определяете тип, используемый для реквизита и состояния, передавая ожидаемые типы как <P,S>

interface IProps {
    superVillian: string;
}

interface IState {
    health: string;
}

export class MyBoringComponent extends React.PureComponent<IProps, IState> {

    render() {
        const { health } = this.state;
        return <span>{`${this.props.superVillian} health is: ${this.state.health}`}</span>
    }
}