带有Typescript和ReactJS的ApexCharts收到'No overload matches this call.'错误

Question

我刚开始打字，慢慢习惯了这个坏男孩。

我从coinpaprika获得了ohlcv数据，并将其交给了ApexCharts。

当我试图将原始数据映射到ApexCharts时，我得到了：

ERROR in src/routes/Chart.tsx:36:30
TS2769: No overload matches this call.
Overload 1 of 2, '(props: Props | Readonly<Props>): ReactApexChart', gave the following error.
Type '{ data: { x: string; y: string[]; }[] | undefined; }' is not assignable to type 'number'.
Overload 2 of 2, '(props: Props, context: any): ReactApexChart', gave the following error.
Type '{ data: { x: string; y: string[]; }[] | undefined; }' is not assignable to type 'number'.
34 |                 <ApexChart
35 |                     type="candlestick"
> 36 |                     series={[{ data: mappedOhlcData }]}
|                              ^^^^^^^^^^^^^^^^^^^^^^^^
37 |                     height={400}
38 |                     options={{
39 |                         chart: {

我设置了一个名为IohlcvData的接口，让typescript知道需要什么类型。

export interface IohlcvData {
time_open: string;
time_close: string;
open: number;
high: number;
low: number;
close: number;
volume: number;
market_cap: number;
}

在获取数据时，我确保告诉typescript期望IohlcvData:

const { isLoading, data } = useQuery<IohlcvData[]>(
["ohlcv", coinId],
() => fetchCoinHistory(coinId),
{ refetchInterval: 10000 }
);

IohlcvData接口也应用于mappedOhlcData:

const mappedOhlcData = data?.map((data: IohlcvData) => ({
x: data.time_open,
y: [data.open.toFixed(2), data.high.toFixed(2), data.low.toFixed(2), data.close.toFixed(2)],
}));

然后，我打电话给ApexChart:

<ApexChart
type="candlestick"
series={[{ data: mappedOhlcData }]}
height={400}
options={{
chart: {
type: "candlestick",
toolbar: {
show: true,
tools: {
download: true,
pan: false,
reset: false,
zoom: false,
zoomin: false,
zoomout: false,
},
},
},
title: {
text: "CandleStick Chart",
align: "center",
},
xaxis: { type: "datetime" },
yaxis: {
labels: { formatter: (value: number) => `$${value.toFixed(2)}` },
axisBorder: { show: false },
axisTicks: { show: false },
tooltip: { enabled: true },
},
}}
/>

"；数据：mappedOhlcData"；正在返回错误。

我见过其他人使用相同语法的ApexCharts，没有任何问题或错误。也许是版本问题？

如有任何建议，我们将不胜感激。

Answer 1

data系列需要{ x: string; y: string[]; }对象的Array类型，但TypeScript无法将mappedOhlcData变量理解为此类数据。

因此，最好使用：强制键入mappedOhlcData

series={[{ data: mappedOhlcData as any[] }]}