[TypeScript] TS7053 - Object.keys()

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

객체의 값에 접근하기 위해 사용한 key가 인터페이스, 타입 정의에 사용된 key의 범위를 벗어나기 때문에 발생하는 오류

문제

• Object.keys 메서드를 통해 얻은 key 배열에 대하여 forEach 메서드로 순회 시도
• forEach문의 인자로 개별 key에 대한 접근 시도
• 이 때, forEach문 내부의 값은 무조건 객체가 가지는 key일 것으로 유추 가능하지만...
• 원하는 대로 타입 추론이 되지 않아 오류 발생

export const filtersFormatter = (filters: Filters) => {
  let str = "";
  Object.keys(filters).forEach(filter => {
    str += filters[filter] ? filter : ""; // filters[filter] 부분에서 오류 발생
  });
  return str;
};

• 기대했던 것과 달리 forEach문 내부의 filter 변수(key)는 객체가 가지는 key의 유니온 타입이 아닌 string 타입으로 추론됩니다.
• key가 string 타입으로 추론되면 객체는 어떠한 key든 가질 수 있게 되므로 value의 타입은 any로 추론됩니다.

해결

• keyof 객체 타입을 명시함으로써 key의 타입을 객체가 가지는 key로 제한합니다.

  // ...
  
  Object.keys(filters).forEach((filter: keyof Filters) => {
    str += filters[filter] ? filter : "";
  });
  
  // ...

key로 사용될 변수의 범위를 객체가 가지는 key로 한정하면 객체[key]로 접근한 결과는 더이상 any로 추론되지 않습니다.