类型 '{ label： string; value： string; }' 在 Typescript react js 中缺少 type 中的以下属性

Question

你好，在获取数组的第一条记录时，typescript中出现了一些数据类型错误。我正在初始化数据，如-

const ABData= testData.B.map(({ id, name }) => ({
label: translateFn!(id),
value : name
}));
const newData: PropsInterface = {
displayData: ABData[0]
};

以下是我的数据-

export const testData: PropsInterface = {
A: [
{ value: "All", key: "All" },
],
B: [
{id: "0", name: ""},
{id: "100000008472", name: "Y6DC"}
],
C: "100000008472",
D: [{id: "0", name: "None"}],
E: [
{value: "", key: "None"},
{value: "A", key: "Test"},
]
}

这是我的界面-

export interface PropsInterface {
A: Array<First>;
B: Array<Second>;
C: string;
D: Array<Second>;
E: Array<First>;
}
export interface First{
key: string;
value: string;
}
export interface Second{
id: string;
name: string;
}

如果我试图使用第0个索引获取第一个数据，则在displayData中出现错误。

错误为-Type '{ label: string; value: string; }' is missing the following properties from type 'Second[]': length, pop, push, concat, and 26 more.

如何解决此错误？

Answer 1

首先让我们检查您的PropsInterface:

// I made A, C, D optionals since the problem here is B as you say first
export interface PropsInterface {
A?: Array<First>;
B: Array<Second>;
C?: string;
D?: Array<Second>;
E?: Array<First>;
}

然后你的First和Second接口：

export interface First {
key: string;
value: string;
}
export interface Second {
id: string;
name: string;
}

现在您提供的数据：

export const testData: PropsInterface = {
A: [{value: 'All', key: 'All'}],
B: [
{id: '0', name: ''},
{id: '100000008472', name: 'Y6DC'}
],
C: '100000008472',
D: [{id: '0', name: 'None'}],
E: [
{value: '', key: 'None'},
{value: 'A', key: 'Test'}
]
};

到目前为止，一切都很好，但问题出现在您的.map函数中：

const ABData = testData.B.map(({id, name}) => ({
label: translateFn!(id),
value: name,
}));

让我们从纯物体的角度来谈谈。您正在将类型为{label: string, value: string}[]的值分配给ABData变量。然后将ABData分配给类型为PropsInterface的newData。您告诉(TS(newData的类型是PropsInterface，但此接口没有displayData属性。

const newData: PropsInterface = {
displayLabel: ABData[0],
};

因此，让我们将displayData道具的名称更改为B。

const newData: PropsInterface = {
B: ABData[0]
};

错误已经消失，但我们仍然有一个问题Type '{ label: string; value: string; }' is missing the following properties from type 'Second[]': length, pop, push, concat, and 26 more.ts(2740)。这是因为我们分配的是数组的一个元素，而不是数组本身。因此，让我们用以下内容更改新数据：

const newData: PropsInterface = {
B: ABData
};

这个错误已经消失，但我们有一个新问题Type '{ label: string; value: string; }[]' is not assignable to type 'Second[]'.，所以让我们修复它。Second有id和name，但我们正在尝试分配label和value。为此，让我们将.map函数修改为：

const ABData = testData.B.map(({id, name}) => ({
id: translateFn!(id),
name: name,
}));

就这样，我们已经修复了所有的错误。最终结果是：

export const testData: PropsInterface = {
A: [{value: 'All', key: 'All'}],
B: [
{id: '0', name: ''},
{id: '100000008472', name: 'Y6DC'}
],
C: '100000008472',
D: [{id: '0', name: 'None'}],
E: [
{value: '', key: 'None'},
{value: 'A', key: 'Test'}
]
};
export interface PropsInterface {
A?: Array<First>;
B: Array<Second>;
C?: string;
D?: Array<Second>;
E?: Array<First>;
}
export interface First {
key: string;
value: string;
}
export interface Second {
id: string;
name: string;
}
const ABData = testData.B.map(({id, name}) => ({
id: translateFn!(id),
name: name
}));
const newData: PropsInterface = {
B: ABData
};