錯誤 TS2339 - 類型 'Readonly<{}>' 上不存在屬性 'x'

Question

一天前我有一個 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 })
    }
}

以前這些錯誤不存在，並且沒有發生任何修改。 有什么建議么？

Answer 1

React.Component是具有兩種類型 arguments 的通用接口，兩者都有默認值：組件接收的 props 和組件維護的 state。 State 默認為{} （根本沒有 state 項），但您的組件有兩個 state 成員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 代碼，您后來添加了 Z558B544CF685F39D34E4903E39C3。

---

旁注：您還需要在constructor中聲明props的類型：

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

...並修復 state 初始化程序中的拼寫錯誤（ true之后的;應該是, ）。 （也沒有render方法，但我假設您只是將其省略以使問題中的事情最小化。）