[TypeScript] 배열 안에 들어 있는 객체 다루기 (feat. String literal)

Date: 2022.02.19

카테고리: TypeScript

오늘 4주 프로젝트를 하면서 API로 장바구니 데이터를 받았다
데이터는 배열 안에 객체가 들어 있는 형식이이었는데 처음 다루는데 어려움을 겪어 기록으로 남기려고 한다

먼저 Redux Toolkit을 이용해 받아온 데이터를 for…in 문으로 순회하고 출력해보았다

// cart.tsx
let data = cartData.cartSlice.data[0];
console.log("data", data);
for (let x in data) {
  console.log("x", x);
}

아래와 같이 잘 출력되는 것을 볼 수 있다

그러나 개별 키에 해당하는 값에 접근하려고 하면 문제가 발생한다

// cart.tsx

let data = cartData.cartSlice.data[0];
console.log("data", data);
for (let x in data) {
  console.log(x, data[x]);
}

'string' 형식의 식을 '{}' 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다. '{}' 형식에서 'string' 형식의 매개 변수가 포함된 인덱스 시그니처를 찾을 수 없습니다.

검색을 통해 index signature와 string literal에 대해 알게 되었다 아래와 같이 index의 형식을 지정해 주면 에러는 쉽게 해결할 수 있다

// cartSlice.tsx

export interface Cart {
  data: { [index: string]: string }[];
}

원인은 string literal만 허용되는 곳에 string타입을 사용했기 때문이다 string literal은 string보다 더 좁은(narowed) 타입이기 때문에 오타 등으로 유효하지 않은 이름으로 인한 런타임을 에러를 방지하는데 도움이 된다고 한다

참고한 블로그 글의 서두에 TS는 JS의 관점에서 벗어나지 못한 상태로 보았을 때 매우 이상하게 느껴질 때가 있다 는 부분이 크게 공감 되었다

이번에 프로젝트를 TS로 진행하는 것을 계기로 TS에 대해 더 많은 공부를 해야겠다