[TS] 배열/객체를 Union 타입으로 변환하는 방법

배열 → Union 타입

1. 변환하고자 하는 배열 뒤에 as const 키워드를 붙여서 readonly 튜플을 만든다.

   const fruits = ['apple', 'banana', 'orange'] as const;

   • 결과

     const fruits: readonly ["apple", "banana", "orange"];

   • 이렇게 하면 아래에서 타입을 변환했을 때 string[]으로 변환되지 않는다.
   • readonly 튜플이기 때문에 값을 바꿀 수 없다.

2. readonly 상태의 배열 앞에 typeof를 붙이고, 배열에 접근할 인덱스의 타입을 지정해주면 변환이 마무리된다.

   type FruitsUnion = typeof fruits[number];

   • 결과

     type FruitsUnion = "apple" | "banana" | "orange";

   • 인덱스 시그니처를 위와 같이 숫자(number) 타입으로 지정해야 배열에 접근이 가능하다.

객체 → Union 타입

1. 변환하고자 하는 객체 뒤에 as const 키워드를 붙여서 readonly 상태로 만든다. (배열과 동일)

   const user = {
     name: 'Sckroll',
     country: 'South Korea',
   } as const;

   • 결과

     const user: {
     	readonly name: "Sckroll";
     	readonly country: "South Korea";
     };

2. readonly 상태의 객체에서 키/값을 각각 Union 타입으로 변환하는 방법은 다음과 같다.

   // 객체 키(key)를 변환
   type UKeys = keyof typeof user;
   // 객체 값(value)을 변환
   type UValues = (typeof user)[keyof typeof user];

   • 결과

     // 변환된 객체 키(key)
     type UKeys = "name" | "country";
     // 변환된 객체 값(value)
     type UValues = "Sckroll" | "South Korea";

출처

Create a Union type from an Array or Object in TypeScript | bobbyhadz