如何使用 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 = {

  id: number;

  name: string;

  price: string;

  q: number;

}

type State = {

  data: Data[],

  count: any[]

}

Answer 2

您的数据类型定义应包含对象属性。

type StateDataElement = {

  id: number,

  name: string,

  price: string,

  q: number

}

type State = {

  data: StateElement[],

  count: []

}

Answer 3

data 是一个包含具有这些属性的对象的数组：

type State = {

  data: {

    id:number,

    name:string,

    price: string,

    q: number

  }[],

  count: []

}