[Error] TypeScript : Element implicitly has an 'any' type because expression of type 'string' can't be used to index

react + typescript + styled-component로 작업하며 발생한 문제입니다.

const colors: IColors = {
  yellow: "#F4C468",
  pink: "#EA43B8",
  green: "#36EB4A",
  purple: "#9F70B6",
};

export default colors;

color.ts 파일을 만들어서 자주 쓰는 색들을 변수로 지정해놨습니다. 그러나 해당 color들의 type을 지정하지 않아 오류가 발생했습니다.

colors의 경우 key값이 제각각이지만 모두 string형식으로 작성되어 이를 한 번에 작성할 수 없을까 찾아보던 중 index signature에 대해 알게되었습니다.

🔎 Index Signature란

객체의 속성에 동적으로 접근하기 위한 특별한 형식입니다. 객체의 속성에 직접 접근하는 대신, 인덱스를 사용하여 속성에 접근합니다. 인덱스 시그니처는 객체의 속성 이름과 해당 속성에 대한 유형을 지정합니다. 일반적으로 인덱스 시그니처는 문자열 또는 숫자로 정의됩니다.

interface IColors {
  [key: string]: string;
}

index signature를 이용해 다음과 같이 IColors 인터페이스로 type을 지정해주었습니다. IColors에서 [key: string]: string은 문자열 인덱스 시그니처를 정의합니다. 이것은 colors 객체의 모든 속성 이름이 문자열이며 해당 속성 값은 항상 문자열임을 나타냅니다.

따라서 colors 객체는 "yellow", "pink", "green", "purple"과 같은 문자열 키로 접근할 수 있습니다.

import colors from "@Constants/color";
...
const $Wrapper = styled.div`
  background-color: ${colors["purple"]};
`

color.ts파일의 변수를 적용하기 위해서는 color파일을 import한 뒤 다음과 같이 작성하면 됩니다.