Type '{ label: string; value: string; }' is missing the following properties from type in Typescript react js

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.

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). 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[]'., 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
};