Reactjs 发现 React 组件类的 `interface` 问题，因为 `Readonly<{}>` 类型上不存在`Property 'show'答案

【问题标题】：Reactjs finding `interface` issue with react component class as `Property 'show' does not exist on type 'Readonly<{}>`Reactjs 发现 React 组件类的 `interface` 问题，因为 `Readonly<{}>` 类型上不存在`Property 'show'
【发布时间】：2021-04-15 10:46:09
【问题描述】：

我相信我已经用正确的方式声明了interface 并用类实现了。但仍然出现错误：

Property 'show' does not exist on type 'Readonly<{}>'.ts(2339)

任何人帮助我进一步了解这里？

这是我的代码：

interface GlobalForm {
    show:boolean
}

export class Footer extends React.Component<GlobalForm> {

    constructor(props:GlobalForm){
        super(props);
        this.state = {
            show:false
        }
    }
    
    globalForm = (event:React.MouseEvent):void => {
        event.preventDefault();
        this.setState(() => ({show:!this.state.show}))
    }

错误：

【问题讨论】：

标签： reactjs typescript-typings tsx

【解决方案1】：

将您的班级声明更改为：

export class Footer extends React.Component<{}, GlobalForm> { ...

状态类型应该在第二个参数中

【讨论】：

【解决方案2】：

React.Component 是一个泛型类型（又名React.Component<PropType, StateType>），因此您需要为其提供（可选）prop 和 state 类型参数。

It should be `React.Component<{}, GlobalForm>` in your case.

【讨论】：