输入'{标签：字符串； 值：字符串； }' 在 Typescript react js 中缺少 type 中的以下属性

Question

Hi I am getting some datatype error in typescript while getting first record of an array. I am initializing the data like -

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

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

Below is my data -

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"},
    ]

}

Here is my interface -

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

I am getting error in displayData if I am trying to get first data using 0th index.

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

How can I resolve this error ?

Answer 1

First of all lets check your 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>;
}

Then you First and Second interfaces:

export interface First {
  key: string;
  value: string;
}

export interface Second {
  id: string;
  name: string;
}

Now the data you are providing:

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'}
  ]
};

Till here, everything is ok but the problem comes in your .map function:

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

Lets talk in terms of the pure object. You are assigning a value of type {label: string, value: string}[] to the ABData variable. Then you are assigning ABData to newData which is of type PropsInterface . You are telling (to TS) that newData is of type PropsInterface but this interface doesn't have a displayData property.

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

So, lets change the name of displayData prop by B .

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

The error is gone but we still have a problem Type '{ label: string; value: string; }' is missing the following properties from type 'Second[]': length, pop, push, concat, and 26 more.ts(2740) Type '{ label: string; value: string; }' is missing the following properties from type 'Second[]': length, pop, push, concat, and 26 more.ts(2740) Type '{ label: string; value: string; }' is missing the following properties from type 'Second[]': length, pop, push, concat, and 26 more.ts(2740) . This is beacause we are assigning an element of an array and not the array itself. So lets change new data with the following:

const newData: PropsInterface = {
  B: ABData
};

This error is gone but we have a new problem Type '{ label: string; value: string; }[]' is not assignable to type 'Second[]'. Type '{ label: string; value: string; }[]' is not assignable to type 'Second[]'. , so lets fix it. Second has id and name but we are trying to assign label and value . For this lets modify the .map function to this:

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

And thats it, we have fix all the errors. The final result is:

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