No index signature with a parameter of type 'number' was found on type xx-CodePudding

These are the types I am using:

export interface IHelpDeskTextData {
  supportPaneltext: ContactHelpdeskContex[];
  selected?: number | null;
  brandOptions?: string[];
  textPanel?: ITextPanel[];
}

export class ContactHelpdeskContex {
  public brand: string;
  public paragraphList: IParagraph[];
}
interface IParagraph {
  rowList: string[];
}

export interface ITextPanel {
  textContent: IParagraph[];
  selected: boolean;
  brand: string;
}

I have a variables with data of type:

public supportPaneltext: ContactHelpdeskContex[];
public textPanel: ITextPanel[] = [];

I try to do create a new variable via the map function of above variable:

public getLabel() {
    if (!this.supportPaneltext) {
      return;
    }

    this.textPanel = Object.values(this.supportPaneltext).map((item,i) => {
      return {
        brand: item[i].brand,
        selected: false,
        textContent: item[i].paragraphList
      }}
      )}

However, I get this error when I try to use the index [i]:

Element implicitly has an 'any' type because expression of type 'number' can't be used to index type 'ContactHelpdeskContex'.
  No index signature with a parameter of type 'number' was found on type 'ContactHelpdeskContex'.

How come, and how to solve it?

CodePudding user response：

Firstly you don't need to use Object.values to iterate through an array and secondly you already have an array element in item so you don't need to use the index variable i:

this.textPanel = this.supportPaneltext.map((item) => {
      return {
        brand: item.brand,
        selected: false,
        textContent: item.paragraphList
      }
      }
      )

CodePudding user response：

This error appear because you try index ContactHelpdeskContex with i like follow: item[i].brand. It's caused by fact that value passed to .map() method (item here) is specific element of array not array itself, you can read how map work here.

Simple remove [i]

public getLabel() {
    if (!this.supportPaneltext) {
        return;
    }

    this.textPanel = Object.values(this.supportPaneltext).map(item => ({
        brand: item.brand,
        selected: false,
        textContent: item.paragraphList
    }))
}