Reactjs 发现 React 组件 class 的“接口”问题，因为“只读<{}>”类型上不存在“属性 'show'”

Question

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

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

错误：

Answer 1

将您的 class 声明更改为：

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

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

Answer 2

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

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

Reactjs 发现 React 组件 class 的“接口”问题，因为“只读<{}>”类型上不存在“属性 'show'”

Reactjs finding `interface` issue with react component class as `Property 'show' does not exist on type 'Readonly<{}>`

reactjs

tsx

typescript-typings