Effective Typescript - 54 - 객체를 순회하는 노하우

아래 예제는 정상적으로 실행은 되지만, 편집기에서는 오류가 발생합니다.

const obj = {     one: 'uno',     two: 'dos',     three: 'tres', }; for (const k in obj) {     const v = obj[k]; //에러) obj에 인덱스 시그니처가 없기 때문에 엘리먼트는 암시적으로 'any' 타입임. }

원인은 obj의 타입은 'one' 'two' 'three' 속성만 허용하는 타입이지만 for 이터레이션의 k 변수의 타입은 string타입으로 추론되었기 때문입니다.

k 변수가 string으로 추론되는 원인은 무엇일까요?

왜냐하면 타입스크립트 타입 체커는 'obj' 속성에 언제든 새로운 속성이 추가될 수 있다는 것을 알고 있기 때문입니다.

obj 객체에 'four'과 같은 속성들이 언제든지 추가가 될 수 있기 때문에 타입 추론을 string으로 합니다.

 

위 예제의 k  타입을 좀더 구체적으로 명시해주면 오류는 사라집니다.

const obj = {     one: 'uno',     two: 'dos',     three: 'tres', }; let k: keyof typeof obj; // 타입이 "one" | "two" | "three"; for (k in obj) {     const v = obj[k]; //정상 }

위와 같은 방법으로 객체를 순회하는 것은 무언가 불편해 보입니다. 더 쉽게 하는 방법이 있는데 아래의 예제를 봅시다.

Object.entries()를 활용하면 객체 순회하는데 복잡하지 않습니다.

const obj = {     one: 'uno',     two: 'dos',     three: 'tres', }; for (const k in obj) {     console.log(obj[k]); // 비정상 } for (const [key, value] of Object.entries(obj)){     console.log(value); // 정상 }