DIL: 이펙티브 타입스크립트

스터디: 월간 CS, https://github.com/monthly-cs/2024-05-effective-typescript
작성일: 2024-06-19
작성자: dusunax

---

아이템 54: 객체를 순회하는 노하우 Know How to Iterate Over Objects

const obj = {
  one: "uno",
  two: "dos",
  three: "tres",
};
for (const k in obj) {
  // const k: string 객체를 순회하는 루프 내의 상수 k는 string
  const v = obj[k]; // obj 객체에는 세 개의 key만 존재 (k와 obj 객체의 키 타입이 서로 다르게 추론)
  //        ~~~~~~ Element implicitly has an 'any' type
  //               because type ... has no index signature
}

let k: keyof typeof obj;

• k의 타입이 "one", "two", "three"가 아니라 string으로 추론되는 이유?

interface ABC {
  a: string;
  b: string;
  c: number;
}

function foo(abc: ABC) {
  for (const k in abc) {
    //       ^? const k: string
    const v = abc[k];
    //        ~~~~~~ Element implicitly has an 'any' type
    //               because type 'ABC' has no index signature
  }
}

const x = { a: "a", b: "b", c: 2, d: new Date() }; // ABC와 호환되는 객체
foo(x); // 구조적 타이핑 OK
// ABC 타입에 '할당 가능한 " 어떤 값이든 매개변수로 허용하기 때문
// 타입스크립트는 ABC 타입의 키를 string으로 선택한다.

// 마찬가지로 아래의 경우, v를 string | number로만 추론하면 오류가 생길 수 있음
function foo(abc: ABC) {
  const keys = ["a", "b", "c"] as const;
  for (const k of keys) {
    //       ^? const k: "a" | "b" | "c"
    const v = abc[k];
    //    ^? const v: string | number
  }
}

• 단순히 객체의 키와 값을 순회한다면? Object.entries

프로토타입 오염

Object.prototype.z = 3;

• for-in 루프에서 k가 string이라면? 프로토타임 오염 가능성
• keyof 선언은 상수거나, 추가적인 키 없이 정확한 타입을 원하는 경우가 적절함

Map

• Map은 반복(iteration)을 쉽게 하기 위해 다양한 메서드를 제공함
  • forEach, entries, keys, values
  • Map은 항목이 삽입된 순서를 기억하고 그 순서를 유지 => 데이터를 저장한 순서대로 반복할 수 있음
• 객체를 반복하려면 Object.keys, Object.values, Object.entries와 같은 메서드를 사용함 (객체보다 Map이 더 직관적)

const m = new Map([
  ["one", "uno"],
  ["two", "dos"],
  ["three", "tres"],
]);
//  ^? const m: Map<string, string>

// 모든 항목을 순회
m.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// entries() 사용
for (const [key, value] of m.entries()) {
  console.log(`${key}: ${value}`);
}

// keys() 사용
for (const key of m.keys()) {
  console.log(key);
}

// values() 사용
for (const value of m.values()) {
  console.log(value);
}

• 크기의 경우
  • 객체: Object.keys(obj).length
  • Map: size 속성으로 직접 접근 가능

Things to Remember

• Be aware that any objects your function receives as parameters might have additional keys.
  • 함수의 매개변수 객체에 추가적인 키가 있을 수 있다는 점을 알아두기
• Use Object.entries to iterate over the keys and values of any object.
  • 객체를 순회하며 키와 값을 얻는 방법: Object.entries
• Use a for-in loop with an explicit type assertion to iterate objects when you know exactly what the keys will be.
  • 객체를 순회할 때, 키가 어떤 타입인지 정확히 파악하고 있다면 for-in 루프를 사용한다. (let k: keyof T)
• Consider Map as an alternative to objects since it's easier to iterate over.
  • 맵이 순회하기 더 쉽다. object를 대체하여 사용할 수 있음