Union Type 을 사용할 때 겪을 수 있는 사소한 실수

예시

tailwind 를 이용해서 범용적으로 사용할 수 있는 flex 컴포넌트를 만든다고 가정해봅니다.
alignItems 속성은 4가지로, 유니온 타입으로 지정해서 사용한다면
타입스크립트의 코드 자동완성 기능을 활용할 수 있어 직접 작성하는 것 보다
덜 귀찮고 휴먼이슈에 대한 부담도 줄어들 것 같습니다!

type AlignItems = "start" | "end" | "stretch" | "baseline";

type FlexProps = {
  alignItems?: AlignItems;
};

const getAlignItems = (alignItems: AlignItems): string => {
  // ...
};

그런데 까다로운 타입스크립트는 위의 코드를 인정해주지 않습니다. 😢

'AlineItems | undefined' 형식의 인수는 'AlineItems' 형식의 매개 변수에 할당될 수 없습니다.

getAlignItems 함수를 호출하려고 하면 위와 같은 에러 메시지를 출력합니다.

왜?

위의 코드를 다시 유심히 봅니다.
AlignItems 타입은 FlexProps 타입을 사용하는 한정으로 선택적 속성입니다.
따라서 props 로 AlignItems 타입의 유형에 해당하는 값을 선택적으로 받을 수 있습니다.
그러나, getAlignItems 함수의 매개변수는 AlignItems 타입을 직접 사용하고 있습니다.
따라서 undefined를 허용하지 않습니다.

해결

두가지 해결 방법이 있습니다.

type AlignItems = "start" | "end" | "stretch" | "baseline";
type FlexProps = {
  alignItems?: AlignItems | undefined;
}
  
const getAlignItems = (alignItems: AlignItems): string => {
    // ...
};

우선, 이런식으로 undefined 일 수 있는 값이다- 라고 명시해주는 방법입니다.
저는 바보라서 이 간단한 해결 방법을 고민했지만,
타입스크립트를 잘 이해하고 계신 분들이라면 고민없이 선택하셨을 방법일지도 😢

다른 한가지는

type FlexProps = {
  alignItems?: "start" | "end" | "stretch" | "baseline";
}
  
const getAlignItems = (alignItems: FlexProps["alignItems"]): string => {
    // ...
};

FlexProps 타입에 alignItmes 속성을 유니온 타입으로 직접 지정하는 방법입니다.
그리고 getAlignItems 의 파라미터의 타입을 그대로 매칭시켜 줍니다.
유니온 타입의 선택지가 많지 않고, 따로 관리할 만큼 타입의 규모가 크지 않다면
이러한 방법도 나쁘지 않을 수 있습니다.