HwangSee

221031 TIL | 이펙티브 타입스크립트_#9 매핑된 타입을 사용하여 값을 동기화 하기

  • 2022년 10월 31일

오늘 한 일

이펙티브 타입스크립트 아이템18 학습

학습 내용

  • 다음 예제는 값이 바뀔 때마다 차트를 다시 그린다.
    • 이런 방법을 보수적 접근법, 실패에 닫힌 접근법이라고 한다.
interface ScatterProps {
  xs: number[];
  ys: number[];

  xRange: [number, number];
  yRange: [number, number];
  color: string;

  onClick: (x: number, y: number, index: number) => void;
}
function shouldUpdate(
  oldProps: ScatterProps,
  newProps: ScatterProps
) {
  let k: keyof ScatterProps;
  for (k in oldProps) {
    if (oldProps[k] !== newProps[k]) {
      if (k !== 'onClick') return true;
    }
  }
  return false;
}
  • 새로운 속성이 추가되었을 때 shouldUpdate()를 고치도록 하기 위해서는 매핑된 타입을 사용해야 한다.
  • 매핑된 타입을 사용하면 관련된 값과 타입을 동기화 할 수 있다.
    • 매핑된 타입을 사용할 경우 타입 체크가 동작한다.
interface ScatterProps {
  // The data
  xs: number[];
  ys: number[];

  // Display
  xRange: [number, number];
  yRange: [number, number];
  color: string;

  // Events
  onClick: (x: number, y: number, index: number) => void;
}
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;
}
  • k in keyof ScatterProps는 타입 체커에 REQUIRES_UPDATE가 ScatterProps과 동일한 속성을 가져야 한다는 정보를 제공한다.
// ScatterProps 인터페이스에 새로운 속성을 추가했을 때
interface ScatterProps {
  // ...
  onDoubleClick: () => void;
}

// REQUIRES_UPDATE 정의에 오류가 발생한다
const REQUIRES_UPDATE: {[k in keyof ScatterProps]: boolean} = {
  //  ~~~~~~~~~~~~~~~ 'onDoubleClick' 속성이 타입에 없습니다.
  // COMPRESS
  xs: true,
  ys: true,
  xRange: true,
  yRange: true,
  color: true,
  onClick: false,
  // END
};
  • 인터페이스에 새로운 속성을 추가할 때 선택을 강제하도록 매핑된 타입을 고려한다.
검색