错误 TS2339 - 类型 'Readonly<{}>' 上不存在属性 'x'答案

【问题标题】：Error TS2339- Property 'x' does not exist on type 'Readonly<{}>'错误 TS2339 - 类型 'Readonly<{}>' 上不存在属性 'x'
【发布时间】：2021-08-10 09:38:57
【问题描述】：

一天前我有一个 React+Typescript 项目运行良好！当我今天尝试运行它时，突然发生了 100 多个相同类型的错误。

错误类型如下：

class Home extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
              x:true;
              y:true;
        };
     }
    toggleone = () => {
         this.setState({ x: !this.state.x })
    }
}

以前这些错误是不存在的，并且没有发生任何修改。有什么建议吗？

【问题讨论】：

标签： reactjs typescript react-redux development-environment

【解决方案1】：

React.Component 是一个具有两个类型参数的通用接口，两者都有默认值：组件接收的 props 和组件维护的状态。状态默认为{}（根本没有状态项），但您的组件有两个状态成员，x 和y。所以你需要这样做

class Home extends React.Component<{}, {x: boolean; y: boolean;}> {
    // ...
}

或作为自己的接口

interface HomeState {
    x: boolean;
    y: boolean;
}
class Home extends React.Component<{}, HomeState> {
    // ...
}

至于为什么突然开始出现这种情况：您显示的代码中根本没有 TypeScript 类型声明或类似的，表明它最初是 JavaScript 代码，您后来添加了 TypeScript。

旁注：您还需要在constructor 中声明props 的类型：

constructor(props: {}) {
    // ...
}

...并修复状态初始化程序中的拼写错误（true 之后的; 应该是,）。（也没有 render 方法，但我假设您只是将其省略以使问题中的内容最小化。）

【讨论】：