TIL - 배열을 타입으로

오늘은 여러 종류가 들어있는 태그를 다룰 필요가 있었다. 이 태그들을 타입으로 관리하려는데 생각보다 애를 먹어서 글로 정리하려 한다.

1. 타입을 배열로 만들어보기

가장 먼저 고안한 방법은 타입을 배열로 만들어보는 것이었다. 예를 들자면

type customType = 'aaa' | 'bbb' | 'ccc'

const myArr = ['aaa', 'bbb', 'ccc']

이런 형식으로 바꾸는 내용이었는데 챗GPT는 못알아듣고 구글링도 쉽지 않았다. 그러다 나온 결과가 애석하게도 불가능이었다. 타입은 코드로서 발생하지 않기에 타입에서 배열로 넘길 수 없다는 내용이 있었다.

2. enum을 통해 타입을 만들기

회사 프로젝트의 경우 모든 값들은 배열이 아닌 enum으로 정리되어있었다. 회사 코드를 바꾸고 싶지는 않아서 enum 방식으로 저장을 시도해보았다.

export enum customEnum = {
  AAA = 'aaa',
  BBB = 'bbb',
  CCC = 'ccc',
}
type customType = 'aaa' | 'bbb' | 'ccc'

하지만 이내 굉장히 비효율적이고 쓸데없다는 사실을 깨닫게 되었다. 나는 value값인 'aaa'만 필요하지 키값을 굳이 줄 필요가 없었다.

3. 배열을 통해 타입을 만들기

결국 돌고돌아서 배열이 담긴 파일을 만들기로 했다. 배열을 통해 만들어낸 타입은 다음과 같다.

const myArr = ['aaa', 'bbb', 'ccc'] as const
export type myType = (typeof myArr)[number]

//'aaa' 'bbb' 'ccc'중 하나가 된다
const value:myType

as const를 집어넣는 이유는 해당 변수의 값이 read-only여야 한다고 알려주는 것이다. 이렇게 해야 컴파일러가 더 잘 이해할 수 있다고 하고 실제로 as const를 도입해보니 value에 마우스를 올리자 'aaa' 'bbb' 'ccc'가 나왔다.

참고자료 1