[TS실생활 54] 객체 순회

객체를 순회하려고 시도하면 생각보다 타입 오류 때문에 빡칠 일이 많다. 이를 비교적 쉽게 회피하는 법을 알아보자.

 

1. keyof T

객체의 프로퍼티 키가 정확히 어떤 타입인지 알고 있으면 써도 좋다. 다만, 구조적 타이핑을 생각하면 함수의 매개변수로 추가적인 키가 존재할 수 있다는 점만 명심하자.

 

2. Object.entries

타입 문제 없이 객체의 키와 값을 순회할 수 있다. ES2017(ES8) 설정을 추가해야 되는 게 문제라면 문제인데, 제일 간단하고 편리한 방법이다.

 

const obj = {
  one: '원',
  two: '투',
  three: '쓰리',
};


1) 이렇게 하면 안되지롱
for (const key in obj) {
  // key는 string으로 추론된다
  // obj는 one two three 세 개의 키만 갖는다
  const value = obj[key];
      // ~~ obj에 인덱스 시그니처가 없기 때문에
      // 엘리먼트는 암시적으로 'any' 타입인데요?
}

2) keyof
// 일단 obj 자체는 JS객체니까 타입을 긁어오기 위해 typeof
// typeof로 긁어온 타입의 프로퍼티 키들을 긁어올 keyof
// 결과적으로 key의 타입은 "one", "two", "three"
let key: keyof typeof obj 
for (key in obj) {
  // 이제 잘 돌아간다
  const value = obj[key];
}

3) Object.entires
// Try changing the 'lib' compiler option to 'es2017' or later.
for (const [key, value] of Object.entries(obj)) {
  // 제일 간단
}