인덱스 시그니쳐(index signature)를 사용하여 객체 접근

문제

유저가 선택한 아이템의 정보를 담고 있는 리스트를 순회하여 해당 아이템이 존재하는지의 여부를 확인하기 위해서 다음과 같이 문자열로 객체의 프로퍼티에 접근하는 코드를 작성하였다.

infoList.forEach((info: InfoType) => {
        let isSorted = false;
        for (let i = 0; i < currentSelectedSortNum; i++) {
          if (info[currentSortName].includes(currentSort[i])) {
            isSorted = true;
            break;
          }
        }

        ( ... )
        
 });

 

하지만 제대로 기능이 동작되지 않았고 오류를 확인하기 위해 콘솔를 보니, 다음과 같은 메세지가 떠 있었다.

Element implicitly has an 'any' type because type ( ... ) has no index signature.

 

문제해결

해당 문제는 indexable 타입과 자바스크립트 색인의 동작방식에 관해 몰라서 생긴 문제였다.

 

자바스크립트는 객체의 프로퍼티에 접근을 할 때 문자열로 접근할 수 있으며 이는 자바스크립트 색인의 동작방식에 의해 객체의 색인에 접근할 때 내부적으로 toString() 메서드를 호출하여 문자열로 변형된 값을 통해 접근한다.

// ES6
let obj = {
    toString() {
        console.log('toString() called');
    }
};
let foo = {};
foo[obj] = 'Key is obj'; // toString() called
console.log(foo[obj]);
// toString() called
// Key is obj

 

하지만 다음과 같은 코드를 똑같이 타입스크립트에서 사용하게 된다면, 위와 같은 에러 메세지가 나온다.

이유인 즉슨, 프로퍼티에 접근할 때 어떤 타입인지 확인할 수 없어 암묵적으로 any 타입을 사용하기 때문이다.

 

이는 tsconfig의 "noImplicitAny": true 이기 때문에 발생하는 에러이다.

 

해당 문제를 해결하기 위해선 인덱스 시그니쳐(index signature)를 사용하면 되었다.

(아래 인터페이스 선언 된 인덱스 시그니쳐는 'key 값은 string이고 반환값은 any' 이라는 의미를 담고 있다)

export interface InfoType {
  [key: string]: any;
  id: number;
  title: string;
  client: string;
  due: string;
  count: number;
  amount: number;
  method: string[];
  material: string[];
  status: string;
}

 

Reference

https://heecheolman.tistory.com/64#%EC%A4%91%EC%B2%A9%EB%90%9C-index-signature

[typescript] 타입스크립트 인터페이스