Index signature
이슈
- Nextjs, tailwind를 통해 간단한 클론을 해보던 도중, 아래와 같은 이슈가 발생하였다.
- 위 사진은
fetch가 속한 getServerSideProps와 데이터를 받아올 쿼리문이 작성된 json 파일을 통해 데이터를 받아온 후 Home컴포넌트에 전달하는 로직이다. 그런데 requests[genre] 부분에서 지속적으로 에러가 발생하였다. 위 사진에는 보이지 않지만, 헤더의 아이템을 클릭했을 때 동적으로 변하는 쿼리값에 따라서 받아오는 데이터도 변했어야 하므로 변수로 접근해야만 해당 기능이 구현 가능하기 때문에 확인해보니 다음과 같은 방법이 필요했다.
해결
- 위와 같은 에러가 발생한 이유는, 바로
index signature을 지정하지 않았기 때문에다. 즉 JavaScript와 달리 TypeScript는 객체의 프로퍼티를 읽을 때 string 형식의 key 사용을 허용하지 않는다. 따라서 접근하고자 하는 key값의 type을 지정해줘야만 하므로 다음과 같은 타입 지정을 통해 해결할 수 있었다. (접근하고자 하는 key 값의 naming은 자유롭게 사용할 수 있다.)
const response = await fetch(
`https://api.themoviedb.org/3${
requests[genre]?.url || requests.fetchTopRated.url
}`
);
// index.tsx
type RequestsType = {
readonly [fetchType: string]: {
title: string;
url: string;
};
};
// requests.ts
export const requests: RequestsType = {
fetchTrending: {
title: "Trending",
url: `/trending/all/week?api_key=${API_KEY}&language=en-US`,
},
fetchTopRated: {
title: "Top Rated",
url: `/movie/top_rated?api_key=${API_KEY}&language=en-US`,
},
- 추가로
index signature을 사용할 경우, 객체 내부 모든 속성 값의 타입을 일일이 모두 선언해줄 필요가 없어진다. 물론 엄격하게 사용하고자 할 경우 피해야 하지만, 스타일 지정의 경우 색상값이 추가될 때 타입을 전체적으로 일일이 명시해줘야 할 필요가 있기 때문에 이러한 점에서는 매우 유용한 기능이라고 생각한다.
Reference