Iterating through object throws 'Element implicitly has an 'any' type because expression of type 'string' can't be used to index type'

Question

So I'm building a diet tracking app, and within my component i'm calculating the user's remaining macronutrients. I thought an efficient way to do this was to store the three variables into one object, so I can iterate through it to calculate the remaining values. Before implementing typescript, the code worked fine, but now that I've converted the file to typescript, it's throwing the following error, which I can't seem to work out:

Error:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ f: number; c: number | null; d: number | null; k: number | null; p: number; e: number; w: number | null; }'.
  No index signature with a parameter of type 'string' was found on type '{ f: number; c: number | null; d: number | null; k: number | null; p: number; e: number; w: number | null; }'.

The object that stores the values:

const values: Mapper = {
        consumed: {
          f: entry.m.f,
          c: entry.m.c,
          d: entry.m.d,
          k: entry.m.k,
          p: entry.m.p,
          e: entry.m.e,
          w: entry.w.t,
        },
        goals: {
          f: entry.g.s.f,
          c: entry.g.s.c,
          d: entry.g.s.d,
          k: entry.g.s.k,
          p: entry.g.s.p,
          e: entry.g.s.e,
          w: entry.g.s.w,
        },
        sum: {
          f: 0,
          c: 0,
          d: 0,
          k: 0,
          p: 0,
          e: 0,
          w: 0,
        },
      };

The Interface used

interface Mapper {
    consumed: {
      f: number;
      c: number | null;
      d: number | null;
      k: number | null;
      p: number;
      e: number;
      w: number | null;
    };
    goals: {
      f: number;
      c: number | null;
      d: number | null;
      k: number | null;
      p: number;
      e: number;
      w: number | null;
    };
    sum: {
      f: number;
      c: number | null;
      d: number | null;
      k: number | null;
      p: number;
      e: number;
      w: number | null;
    };
  }

My.forEach:

goals.forEach((goal) => {
            if (values.goals[goal] !== null) {
              values.sum[goal] = +(
                values.goals[goal] - values.consumed[goal]
              ).toFixed(1);
            }
          });

I don't get it. The forEach even makes sure the assignment to values.sum[goal] is a number. I've consoled logged the type and verified number assignments. So why is it giving me such a hard time? I've also tried Object.keys(values).forEach [ ... ] but with no luck.

Can anyone help me out here? I'm very new to typescript, so I guess I'm probably just making a simple mistake here...

Thanks for taking the time to read and assist!

Answer 1

For those who are in a similar problem, I have the solution:

you have to define the index type with [index: string]: any;where you intend to iterate over

interface Mapper {
    [index: string]: any;
    consumed: {
      [index: string]: any;
      f: number;
      c: number | null;
      d: number | null;
      k: number | null;
      p: number;
      e: number;
      w: number | null;
    };
    goals: {
      [index: string]: any;
      f: number;
      c: number | null;
      d: number | null;
      k: number | null;
      p: number;
      e: number;
      w: number | null;
    };
    sum: {
      [index: string]: any;
      f: number;
      c: number | null;
      d: number | null;
      k: number | null;
      p: number;
      e: number;
      w: number | null;
    };
  }