如何使用 TypeScript 为响应中的对象编写状态类型？

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

您是否已经为您的数据定义了类型？我没有看到一个，但如果它不存在，你会想要使用它或创建一个。例如：type Data = {&nbsp; id: number;&nbsp; name: string;&nbsp; price: string;&nbsp; q: number;}type State = {&nbsp; data: Data[],&nbsp; count: any[]}

Answer 2

您的数据类型定义应包含对象属性。type StateDataElement = {&nbsp; id: number,&nbsp; name: string,&nbsp; price: string,&nbsp; q: number}type State = {&nbsp; data: StateElement[],&nbsp; count: []}

Answer 3

data 是一个包含具有这些属性的对象的数组：type State = {&nbsp; data: {&nbsp; &nbsp; id:number,&nbsp; &nbsp; name:string,&nbsp; &nbsp; price: string,&nbsp; &nbsp; q: number&nbsp; }[],&nbsp; count: []}