TIL: Typescript | 웹에서 enum을 지양하는 이유 - 220902

Lumpen·2022년 9월 2일
1

TIL

목록 보기
136/244
post-custom-banner

enum(열거형)

유니온 타입의 종류가 많아질수록 가독성이 떨어진다
enum 타입은 객체 처럼 작성하여 타입 열거를 할 수 있다

문제점

  1. Tree-Shaking이 되지 않는다 - enum 타입은 자바스크립트에 존재하지 않는 문법이기 떄문에 즉시 실행 함수로 변환되고 즉시 실행 함수는 번들러에서 코드를 줄여주는 Tree-Shaking이 되지 않는다

  2. 숫자 값에 대한 타입 검사가 이뤄지지 않는다

union

enum타입의 문제점을 해결하기 위해
객체에 as const를 사용하여 union 타입을 추출해 사용하는 것을 권장하고 있다

export const obj = {
  a: "a",
  b: "b",
  c: "c",
  d: "d",
  d: "d",
} as const;

// type objType = typeof status[keyof typeof obj];
//	union 추출코드를 제네릭으로 추상화한 아래의 코드로 사용하자 

type Union<T> = T[keyof T];

export type objType = Union<typeof obj>;

keyof는 Object의 key 리터럴 값들을 가져오는 키워드

as const는 객체나 배열도 const로 선언한 원시 값의 타입처럼
리터럴 타입의 추론 범위를 줄이고 값의 재할당을 막아준다(readonly
)
위 코드에서 as const를 사용하지 않으면
object의 value 값이 string으로 추론되지만
사용하면 'a', 'b'.. 처럼 각각의 명시된 문자열 자체로 타입이 지정된다

union 추출코드를 제네릭으로 추상화하기

제네릭을 통해 추상화하여 타입도 함수처럼 재사용할 수 있다
union 추출이 필요할 때마다 매번 문법을 생각해내서 일일히 적지 않고
Union이라는 별도의 타입을 만들어서 export 하여 재사용 가능

모바일

React Native를 사용한다면 enum 타입으로 사용하는 편이
네이티브 언어와 호환성이 더 좋다고 함

참고

profile
떠돌이 생활을 하는. 실업자, 부랑 생활을 하는
post-custom-banner

0개의 댓글