본문으로 바로가기

[TypeScript] 타입스크립트 union 타입 합치기

아래 문제를 해결할 수 있다면 게시글을 읽을 필요는 없습니다.

const GENDER = ["남자", "여자"] as const;
type Gender = typeof GENDER[number];

const DECADES = ["20", "30", "40"] as const;
type Decades = typeof DECADES[number];

type GenderDecades = `${Gender}_${Decades}`
const GENDER_DECADES: GenderDecades[] = ???;

코드를 추가하셔서 ??? 부분에 특정 코드를 작성했을 때 에러가 발생하지 않으면 됩니다.

union 타입 합치기

TypeScript에서 union 타입을 합치는 방법은 매우 간단합니다.
위 퀴즈에서도 보았듯이 `${Type1}${Type2}`를 하시면 됩니다.

그러나 해당 타입을 값을 표현하는 것은 어려울 수도 있습니다.
(사실 엄청 쉬운데 제가 못 해서 어렵게 하는 것일 수도 있습니다.)

저는 아래 combineArrays 함수를 구현해서 해결했습니다.

const combineArrays = <T extends string, U extends string>(
  arr1: T[],
  arr2: U[],
): Array<`${T}${U}`> => {
  const result: Array<`${T}${U}`> = [];
  arr1.forEach((el1) => {
    arr2.forEach((el2) => {
      result.push(`${el1}${el2}`);
    });
  });
  return result;
};

위 함수를 이용하면 쉽게 해결하실 수 있습니다.
완성 코드는 아래와 같습니다.

const combineArrays = <T extends string, U extends string>(
  arr1: T[],
  arr2: U[],
): Array<`${T}${U}`> => {
  const result: Array<`${T}${U}`> = [];
  arr1.forEach((el1) => {
    arr2.forEach((el2) => {
      result.push(`${el1}${el2}`);
    });
  });
  return result;
};

const GENDER = ["남자", "여자"] as const;
type Gender = typeof GENDER[number];

const DECADES = ["20", "30", "40"] as const;
type Decades = typeof DECADES[number];

type GenderDecades = `${Gender}_${Decades}`
const GENDER_DECADES: GenderDecades[] = combineArrays(GENDER, DECADES);

저는 위처럼 해결했는데 더 쉬운 방법이 있으면 댓글 부탁드리겠습니다.

반응형