Typescript - 팁 및 요령 - Type Guard

메서드를 올바르게 구현하기 위해 객체 유형을 감지해야 하는 경우가 있습니다.
사례를 보여드리겠습니다

type Square = {
  size: number;
};

type Rectangle = {
  with: number;
  height: number;
};

type Circle = {
  radius: number;
};

type Shape = Square | Rectangle | Circle;

const area = (shape: Shape) => {
  if ("size" in shape) return shape.size * shape.size;
  if ("with" in shape) return shape.with * shape.height;
  if ("radius" in shape) return shape.radius * 2 * Math.PI;
};

이 경우 영역 방법에서 올바른 결과를 반환하려면 모양의 유형을 감지해야 합니다.
여기서 우리는 if 조건에서 모양의 유형을 감지하지만 typescript를 사용하면 유형이 특정 유형인지 여부를 식별하는 특수 함수를 만들 수 있습니다.
이러한 함수는 컴파일러, 인텔리센스 및 우리가 개체의 올바른 유형을 이해하는 데 도움이 되는 Type Guard를 갖도록 만들어졌습니다.
이 함수가 실제로 작동하는지 보여주기 위해 이전 예제를 이런 식으로 다시 작성할 수 있습니다.

Square = {
  size: number;
};

type Rectangle = {
  with: number;
  height: number;
};

type Circle = {
  radius: number;
};

type Shape = Square | Rectangle | Circle;

function isSquare(shape: Shape): shape is Square {
  return "size" in shape;
}

function isRectangle(shape: Shape): shape is Rectangle {
  return "with" in shape;
}

function isCircle(shape: Shape): shape is Circle {
  return "radius" in shape;
}

const area = (shape: Shape) => {
  if (isSquare(shape)) return shape.size * shape.size;
  if (isRectangle(shape)) return shape.with * shape.height;
  if (isCircle(shape)) return shape.radius * 2 * Math.PI;
};

보시다시피 isSquare, isRectangle 및 isCircle 메서드는 매개변수로 모양을 가져오고 부울 값을 반환합니다. 결과가 true이면 shape 매개변수는 is 키워드 오른쪽에 표시된 유형에 해당하고, 그렇지 않으면 다른 유형에 해당합니다.

이 기능이 나중에 도움이 되고 코드 가독성이 향상되기를 바랍니다.

다 가이!
곧 봐요!