매핑된 타입을 사용하여 값을 동기화

매핑된 타입은 한 객체가 또 다른 객체와 정확히 같은 속성을 가지게 할 때 이상적이다

const REQUIRES_UPDATE: { [k in keyof ScatterProps]: boolean } = {
  xs: true,
  ys: true,
  xRange: true,
  yRange: true,
  color: true,
  onClick: false,
};

function shouldUpdate(oldProps: ScatterProps, newProps: ScatterProps) {
  let k: keyof ScatterProps;
  for (k in oldProps) {
    if (oldProps[k] !== newProps[k] && REQUIRES_UPDATE[k]) {
      return true;
    }
  }
  return false;
}

typescript [k in keyof ScatterProps] 은 타입 체커에게 REQUIRES_UDPATE 가 ScatterProps 와 동일한 속성을 가져야한다는 정보를 제공합니다.

나중에 ScatterProps 에 새로운 속성을 추가하는 경우 다음 코드와 같은 형태가 됩니다.

interace ScatterProps {
  // ... Error onDoubleClick 속성이 타입에 없습니다.
  onDoubleClick: () => void;
}

이런 방식은 오류를 정확히 잡아 냅니다. 속성을 삭제하거나 이름을 바꾸어도 비슷한 오류가 발생합니다.

✅ 매핑된 타입을 사용해서 관련된 값과 타입을 동기화하도록 합시다.
인터페이스에 새로운 속성을 추가할 때, 선택을 강제하도록 매핑된 타입을 고려해야 합니다.