[TS] 'string' 형식의 매개 변수가 포함된 인덱스 시그니처를 찾을 수 없습니다

에러 메시지

 

 

'string' 형식의 식을 
'{ school: IconType; grade: IconType; username: IconType; userid: IconType; password: IconType; repassword: IconType; nickname: IconType; }' 
인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다.
'{ school: IconType; grade: IconType; username: IconType; userid: IconType; password: IconType; repassword: IconType; nickname: IconType; }' 형식에서 
'string' 형식의 매개 변수가 포함된 인덱스 시그니처를 찾을 수 없습니다.ts(7053)

 

에러 발생 상황 

아이콘을 컴포넌트로 분리하기 위해서 파일을 작성하는 과정에서 생긴 에러다. 

Icon 컴포넌트가 아이콘의 이름과 className 값을 받아오면, 

iconsMap 객체에서 해당하는 아이콘 이름 값을 가져오는 것이다. 

 

에러 발생 이유

객체에서 동적 키 값으로 접근할 때, 타입을 알 수 없어서 생긴 문제이다. 

즉 객체의 키가 string 타입일 수 있지만, 해당 객체에 명시적으로 정의된 키 (school, grade 등)만 허용된다는 의미다. 

 

에러 해결

객체를 인덱스 시그니처로 수정하여 string 키를 허용하도록 하자. 

 

 

 

추가 설명

{ [key: string]: IconType }

 

이 표현은 ts에서 인덱스 시그니처 라고 부른다. 

객체의 키 타입과 값 타입을 정의하는 방법이다. 

key 를 배열로 감싼 것처럼 보일 수 있지만, 

실제로는 객체의 키가 문자열일 때, 

그 값의 타입이 IconType 이라는 것을 명시하는 방법이다. 

 

=> 

- 모든 string 타입의 키를 가질 수 있고, 그 값은 IconType 타입이어야 한다는 뜻이다. 

- 객체의 동적 키에 대해 타입을 안전하게 지정한다.