如何为对象定义正确的数据类型
How to defined correct data type for object
我把这个作为我的道具传递
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 的新手,我正在接收作为对象的数据。任何数据类型都有效,但它不是正确的类型,如何定义上述对象的数据类型并消除类型错误,(代码工作正常)
你可以这样声明:
{ data }: {data: Array<{ date: string; books: number }>}
试试这个方法,
export const Chart = ({ data }: {data: { date: string; books: number }[]}) => (
<chart data={data}
type="monotone"
dataKey="reviews"
stroke="#c80acc"
activeDot={{ r: 8 }}
/> );
Codesandbox - https://codesandbox.io/s/bold-moon-hr9ne?file=/src/App.tsx
我把这个作为我的道具传递
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 的新手,我正在接收作为对象的数据。任何数据类型都有效,但它不是正确的类型,如何定义上述对象的数据类型并消除类型错误,(代码工作正常)
你可以这样声明:
{ data }: {data: Array<{ date: string; books: number }>}
试试这个方法,
export const Chart = ({ data }: {data: { date: string; books: number }[]}) => (
<chart data={data}
type="monotone"
dataKey="reviews"
stroke="#c80acc"
activeDot={{ r: 8 }}
/> );
Codesandbox - https://codesandbox.io/s/bold-moon-hr9ne?file=/src/App.tsx