tsx 編寫react 遇見類型“Readonly<{}>”上不存在屬性XXX解決辦法

這樣的問題是TS語法類型檢測的時候會報錯，這時候可以給state個props生命類型，問題解決，代碼如下：

import React from "react";
type StateType = {
  name: string;
  number: number;
};
type propType = {
    name: string;
    number: number;
  };
interface Test1 {
  state: StateType;
  props:propType
}
class Test1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      number: 2
    };
  }

  render() {
    console.log(this.props.name);
    return (
      <div>
        <div>
          <label htmlFor="">單號</label>
          <input
            type="text"
            value={this.state.name}
            onChange={e => this.setState({ name: e.target.value })}
          />
        </div>
        <div>
          <label htmlFor="">創建用戶</label>
          <input
            type="text"
            value={this.state.number}
            onChange={e => this.setState({ number: e.target.value })}
          />
        </div>
        <div></div>
      </div>
    );
  }
}

export default Test1;

這個

propType和

StateType 
就是聲明類型的地方，如此問題解決，網上還有一種方案是把

React.Component改成

 React.Component<any, any>
但是這樣一來對state和props的類型檢測就失去意義了，所以不太建議使用
但是其實還能這么寫，看一下TS的解釋會發現

React.Component<any, any>

 這里面的第一個any可以是props的類型，第二個any可以是state的類型，即：

class Test1 extends React.Component<propType,StateType>

問題一樣可以解決