[타입설계 32] 인터페이스의 유니온(not 유니온의 인터페이스)

유니온 타입의 속성을 여럿 가지는 인터페이스를 작성 중이라면 아래와 같은 이유로 다시 한번쯤 생각해봐야 한다. 
 - 유니온의 인터페이스는 속성 간의 관계가 불분명할 수 있다
 - 인터페이스의 유니온이 보다 더 정확하고 TS가이해하기도 좋은 형태이다

1. 유니온의 인터페이스(bad)
아래 예시 코드를 보자. 점/선/면을 그리는 인터페이스를 만드려고 하는데 뭔가 이상해보인다.

레이아웃은 LineLayout인데 
페인트는 FillPaint면 이상한거 아냐?

interface Layer {
  layout :FillLayout | LineLayout | PointLayout;
  paint :FillPaint | LinePaint | PointPaint;
}

 

2. 인터페이스의 유니온(good)

위 예시를 태그된 유니온을 끼얹어서 훨씬 명료하게 작성할 수 있다. 실제로 태그된 유니온 패턴은 매우 흔한 패턴이므로 반드시 기억해서 필요할 때 적용할 수 있게끔 연습하길 바란다.

interface FillLayer {
  type: 'Fill';
  layout :FillLayout;
  paint :FillPaint;
}

interface LineLayer {
  type: 'Line';
  layout :LineLayout;
  paint :LinePaint;
}

interface PointLayer {
  type: 'Point';
  layout :PointLayout;
  paint :PointPaint;
}

type Layer = FillLayer | LineLayer | PointLayer;

// 와 이거봐라 얼마나 깔끔하고 좋냐
function drawLayer(layer :Layer) {
  switch (layer.type) {
    case 'Fill':
      return '면을 채우는 무언가';
    case 'Line':
      return '선을 그리는 무언가';
    case 'Point':
      return '점을 그리는 무언가';
  }
}