I get the following error and just dont understand why:
map does not exist on type DataItemList
<code>export interface DataItemList {
'performanceTimePointList'?: Array<DataItem>;
}
export interface DataItem {
title: string,
...
}
</code>
<code>export interface DataItemList {
'performanceTimePointList'?: Array<DataItem>;
}
export interface DataItem {
title: string,
...
}
</code>
export interface DataItemList {
'performanceTimePointList'?: Array<DataItem>;
}
export interface DataItem {
title: string,
...
}
Does not work and gives error:
<code> const convertToChartData = async (data: DataItemList) => {
console.log("???", data);
const performanceData = data.map(() => data.title)
}
</code>
<code> const convertToChartData = async (data: DataItemList) => {
console.log("???", data);
const performanceData = data.map(() => data.title)
}
</code>
const convertToChartData = async (data: DataItemList) => {
console.log("???", data);
const performanceData = data.map(() => data.title)
}
Does work:
<code> const convertToChartData = async (data: DataItem[]) => {
console.log("???", data);
const performanceData = data.map(() => data.title)
}
</code>
<code> const convertToChartData = async (data: DataItem[]) => {
console.log("???", data);
const performanceData = data.map(() => data.title)
}
</code>
const convertToChartData = async (data: DataItem[]) => {
console.log("???", data);
const performanceData = data.map(() => data.title)
}
I dont understand why the second one works, as writing DataItem[] is only saying its an array with DataItem(s) and DataItemnList is the array.
2
The issue is from the type definition in your convertToChartData function. In your first example, data is of type DataItemList, which has an optional property performanceTimePointList of type Array. This means that data itself is not an array but an object, so calling .map() directly on data will not work.
on other hand, your second example works because you are directly specifying that data is an array of DataItem, allowing you to use the .map() method.
To fix the first case, you should map over data.performanceTimePointList if it exists.
<code>const convertToChartData = async (data: DataItemList) => {
console.log("???", data);
const performanceData = data.performanceTimePointList?.map(item => item.title) || [] }
</code>
<code>const convertToChartData = async (data: DataItemList) => {
console.log("???", data);
const performanceData = data.performanceTimePointList?.map(item => item.title) || [] }
</code>
const convertToChartData = async (data: DataItemList) => {
console.log("???", data);
const performanceData = data.performanceTimePointList?.map(item => item.title) || [] }
Hope it help you
3