Home > OS >  How to iterate over known property keys in TypeScript?
How to iterate over known property keys in TypeScript?

Time:11-26

This is my code:

interface Siswa {
  name: string,
  points: { a: number, b: number, c: number, d?: number, e?: number }
}

function find_average_points(data: Array<Siswa>): Array<{name: string, average: number}> {
  let returned_array: Array<{name: string, average: number}> = [];
  data.forEach((item: Siswa) => {
    let sum: number = 0;
    let keys = Object.keys(item.points);
    keys.forEach((key: any) => sum =item.points[key]);
    returned_array.push({name: item.name, average: (sum/keys.length)});
  });
  return returned_array;
}

When I tried this function in JavaScript, it ran correctly and the result is what I want, but in TypeScript, I got an error in item.points[key]. It says:

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

I don't know what it means.

CodePudding user response:

Using Object.keys() returns the type string[] (as explained in this comment). Instead, you can create arrays for the known keys in the points object, use them to build your types, and then loop through those keys when summing the values:

TS Playground link

const definitePoints = ['a', 'b', 'c'] as const;
const maybePoints = ['d', 'e'] as const;

type Points = (
  Record<typeof definitePoints[number], number>
  & Partial<Record<typeof maybePoints[number], number>>
);

interface Siswa {
  name: string,
  points: Points;
}

interface SiswaAverage {
  name: string;
  average: number;
}

function find_average_points (data: Array<Siswa>): Array<SiswaAverage> {
  const result: Array<SiswaAverage> = [];

  for (const {name, points} of data) {
    let sum = 0;
    let count = 0;

    for (const point of [...definitePoints, ...maybePoints]) {
      const value = points[point];
      if (typeof value !== 'number') continue;
      sum  = value;
      count  = 1;
    }

    result.push({name, average: sum / count});
  }

  return result;
}

CodePudding user response:

You can use a combination of keyof and null check to solve the problem.

interface Point { a: number, b: number, c: number, d?: number, e?: number } // so you can use keyof

interface Siswa {
    name: string,
    points: Point
}

const whatsit = { 
    name: "a",
    points: { a: 1, b: 2, c: 3, f: "oopsie", g: false } // wrong data type if const whatsit: Siswa
}

console.log(find_average_points([whatsit])[0].average); // NaN


function find_average_points(data: Array<Siswa>): Array<{ name: string, average: number }> {
    let returned_array: Array<{ name: string, average: number }> = [];
    data.forEach((item: Siswa) => {
        let sum: number = 0;
        let keys = Object.keys(item.points) as (keyof Point)[]; // defined what it really is.
        keys.forEach((key) => sum  = item.points[key] ?? 0 ); // incase undefined
        returned_array.push({ name: item.name, average: (sum / keys.length) });
    });
    return returned_array;
  • Related