如何使用 TypeScript 為 state 編寫帶有反應對象的類型？

Question

我是 TypeScript 的新手。 我不知道如何為我的 id 名稱 price 和 q 編寫類型。 這個怎么做？ 請告訴我該怎么做

type State = {
  data:[],
  id:number,
  name:string,
  price: string,
  q: number,
  count: []
}
class Shop extends React.Component<{}, State> {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          id: 1,
          name: "Product 1",
          price: "50",
          q: 0
        },
        {
          id: 2,
          name: "Product 2",
          price: "70",
          q: 0
        }
      ],
      count: []
    };
  }


  render() {
    return (
      <div className="wrap">
        <ProductList products={this.state.data} />
        <CartList cart={this.state.count} />
      </div>
    );
  }
}
ReactDOM.render(<Shop />, document.getElementById("root"));

預期類型來自屬性“數據”，該屬性在此處以“只讀”類型聲明

Answer 1

data是一個包含具有這些屬性的對象的數組：

type State = {
  data: {
    id:number,
    name:string,
    price: string,
    q: number
  }[],
  count: []
}

Answer 2

您是否已經為您的數據定義了類型？ 我沒有看到一個，但如果它不存在，你會想要使用它或創建一個。 例如：

type Data = {
  id: number;
  name: string;
  price: string;
  q: number;
}

type State = {
  data: Data[],
  count: any[]
}

Answer 3

您的數據類型定義應包含 object 屬性。

type StateDataElement = {
  id: number,
  name: string,
  price: string,
  q: number
}

type State = {
  data: StateElement[],
  count: []
}