TypeScript, 배열 요소들로 유니온 타입 (Union Type) 얻기

2023-08-24

status

publish

thumbnail

date

Aug 24, 2023

slug

union-type-from-array

summary

배열의 값으로 이루어진 유니온 타입을 만들어보자

배열에서 Union 타입 추출하기


const sizes = ['small', 'medium', 'large'];
type T = typeof sizes; // type T = string[]

일반적으로 배열의 타입을 추론하기 위해서 typeof 키워드를 사용한다.

하지만, 이렇게 사용할 경우 원시 타입(Primitive Type) 자체를 추론하기 때문에 우리가 원하는 동작인 배열 내부 값들로 이루어진 유니온 타입(Union Type) 을 추론하지 못한다.

const assertion 이용하기


const sizes = ['small', 'medium', 'large'] as const;

// type T = readonly ["small", "medium", "large"]
type T = typeof sizes;

// [["0", "small"], ["1", "medium"], ["2", "large"]]
console.log(Object.values(sizes));

TypeScript 3.4에 추가된 const assertion을 이용해보자.

const assertion이 적용된 배열은 readonly로 수정이 불가하게 된다. 그리고 내부적으로 numberic index signature를 갖게 된다.


// type SizeType = "small" | "medium" | "large"
type SizeType = (typeof sizes)[number];

index signature의 타입인 number를 이용해서 타입(typeof)의 value에 접근이 가능해진다.

그 결과, "small" | "medium" | "large" 과 같은 배열의 값으로 구성된 유니온 타입을 얻을 수 있다. 🥳