TypeScript에서 string으로 객체에 접근하기

리액트 앱 개발을 하던 중, string키로 객체에 접근하는 방법을 사용하였다.
방법은 다음과 같다.

const icons = {
  BRONZE: "bronze",
  SILVER: "silver",
  GOLD: "gold",
  PLATINUM: "platinum",
  .....
};

export const SummonerTop = () =>{
	......
	return (
    	<Img
              src={`${process.env.PUBLIC_URL}/img/${icons[soloRank.tier]}.png`}
              alt="Tier"
         />
    )
}

위의 코드에서 soloRank.tier의 값에 따라(ex - "GOLD", "SILVER" 등등) icons에서 "gold", "silver"값을 가져온다.

그런데 이게 왠걸.. 타입스크립트에서 다음과 같은 에러가 발생하였다.

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ BRONZE: string; SILVER: string; GOLD: string; PLATINUM: string; DIAMOND: string; MASTER: string; CHALLENGER: string; }'.
No index signature with a parameter of type 'string' was found on type '{ BRONZE: string; SILVER: string; GOLD: string; PLATINUM: string; DIAMOND: string; MASTER: string; CHALLENGER: string; }'.

대충 해석해보니
'string'타입을 인덱스 타입에 사용할 수 없으므로 요소에는 암시적으로 'any' 유형이 있습니다.

(뭔소리지..)

	<Img
          src={`${process.env.PUBLIC_URL}/img/${icons["GOLD"]}.png`}
          alt="Tier"
     />

위처럼 "GOLD"를 직접 넣는 것은 또 에러가 발생하지 않는다..

이 에러는 다음처럼 Index Signature 선언하여 해결할 수 있다.

type Iicon = {
  [index: string]: string;
};
const icons: Iicon = {
  BRONZE: "bronze",
  SILVER: "silver",
  GOLD: "gold",
  PLATINUM: "platinum",
  DIAMOND: "diamond",
  MASTER: "master",
  CHALLENGER: "challenger",
};
...
	return (
    	<Img
              src={`${process.env.PUBLIC_URL}/img/${icons[soloRank.tier]}.png`}
              alt="Tier"
         />
    )

에러 해결!