Блог

Привет, я получаю некоторую ошибку типа данных в 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;
}
  

Я получаю ошибку в displayData, если я пытаюсь получить первые данные, используя 0-й индекс.

ошибка — Type '{ label: string; value: string; }' is missing the following properties from type 'Second[]': length, pop, push, concat, and 26 more.

Как я могу устранить эту ошибку?

Прежде всего, давайте проверим ваш 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}[] переменной значение type ABData . Затем вы присваиваете ABData newData значение, которое имеет тип PropsInterface . Вы сообщаете (TS), что newData это тип PropsInterface , но у этого интерфейса нет displayData свойства.

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

Итак, давайте изменим имя displayData prop на 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
};