如何为对象定义正确的数据类型答案

【问题标题】：How to defined correct data type for object如何为对象定义正确的数据类型
【发布时间】：2021-09-20 10:01:27
【问题描述】：

我将这个作为我的道具传递

 export const LineChart = () => {
  const data = [
    {
      date: "2021/07/01",
      books: 10
    },
    {
      date: "2021/07/02",
      books: 25
    },
    {
      date: "2021/07/03",
      books: 15
    },
    {
      date: "2021/07/04",
      books: 48
    },
    {
      date: "2021/07/05",
      books: 102
    },
    {
      date: "2021/07/06",
      books: 59
    },
    {
      date: "2021/07/07",
      books: 37
    }
  ];
  return <Chart data={data} />;
};

我在我的组件中接收这些数据作为道具

export const Chart = ({ data }:**type of data***) => (
    <chart
      data={data}
      type="monotone"
      dataKey="reviews"
      stroke="#c80acc"
      activeDot={{ r: 8 }}
    />  );

我们如何在 typescript 中定义 prop Data 的类型，我是 typescript 的新手，我将数据作为对象接收。 datatype any 有效，但它不是正确的类型，如何定义上述对象的数据类型并消除类型错误，（代码工作正常）

【问题讨论】：

手册是否给出了答案？（见：typescriptlang.org/docs/handbook/2/objects.html）

标签： reactjs types typeerror typescript-typings prop

【解决方案1】：

你可以这样声明：

{ data }: {data: Array<{ date: string; books: number }>}

【讨论】：

【解决方案2】：

试试这个方法，

     export const Chart = ({ data }: {data: { date: string; books: number }[]}) => (
             <chart data={data}
               type="monotone"
              dataKey="reviews"
              stroke="#c80acc"
             activeDot={{ r: 8 }}
        /> );

代码沙盒 - https://codesandbox.io/s/bold-moon-hr9ne?file=/src/App.tsx

【讨论】：