Question

我把这个当成我的道具

 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} />;
};

我在组件中接收这些数据作为 props

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

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

Answer 1

你可以这样声明：

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

Answer 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

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

2 个答案: