为什么打字稿报告关于JS对象解构的错误“类型'{}'不具有属性”

Question

我已在Visual Studio Code中对我的JavaScript项目启用类型检查。尝试执行销毁任务时出现错误：

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