[TypeScript] Union, Intersection, Enum

황수콩·2023년 11월 14일
0
post-thumbnail

5주차 TypeScript Study 에서는 Union , Intersectionenum 에 대해 배웠습니다

스터디 내용을 복습하면서 각 타입이 언제 사용되는지 더 알아보았습니다

👥 Union

🤷🏻 union type 이란?

합집합 A ∪ B → 즉, A타입, B 타입 둘 중 하나 !

 | 로 구분하고 Javascript 의 OR 연산자와 비슷한 역할을 한다!

let one: string | number | boolean;
 
one = 1;
one = '1';
one = true;

🙆🏻 언제 사용할까?

  • 여러 타입 중 하나가 올 것이라고 가정할 때 사용
  • 단, 인터페이스에 유니온 타입을 사용하는 경우 인터페이스 유니온 타입을 확장하지 못함
    • 이럴 때는 type alias& 를 사용해야 함

👤 Intersection

🤷🏻 intersection type 이란?

교집합 A ∩ B → 즉, A타입이면서 B타입 !

 & 로 구분하고 Javascript 의 OR 연산자와 비슷한 역할을 한다!

type Student = {
    study: () => void;
};
 
type Developer = {
    develop: () => void;
}
 
const subin: Human & Developer = {
    study() {
        console.log("공부 중");
    } ,
    develop() {
        console.log("개발 중");
    } 
}

🙆🏻 언제 사용할까?

  • 기존 타입을 대체하지 않으면서 기존 타입에 새로운 필드를 추가하고 싶을 때 사용

⛓️ Enum

🤷🏻 enum 이란?

열거형, 특정 값들의 집합이름이 있는 상수들로 구성하는 방법

enum LanguageCode {
  korean = 'ko',
  english = 'en',
  japanese = 'ja',
  chinese = 'zh',
  spanish = 'es',
}

🙆🏻 언제 사용할까?

  • 추상화를 하고 싶을 때
    enum LanguageCode {
      korean = 'ko',
      english = 'en',
      japanese = 'ja',
      chinese = 'zh',
      spanish = 'es',
    }
    
    const code: LanguageCode = LanguageCode.korean

🙅🏻 enum의 문제점

  • 확장 불가능성
    • 특정 enum 과 다른 enum 을 합쳐 또 다른 enum을 만들기 위해서는 union type 을 사용해야한다
  • 불완전한 타입 안정성
  • 코드 사이즈 증가
    • enum 은 결국 JS 객체로 컴파일 되기 때문에 많은 enum 선언은 전체적인 코드 사이즈에 영향을 준다

💁🏻 enum의 대체 방법

1️⃣ union type 사용하기

enum LanguageCode {
  korean = 'ko',
  english = 'en',
  japanese = 'ja',
  chinese = 'zh',
  spanish = 'es',
}

type LanguageCode = 'ko' | 'en' | 'ja' | 'zh' | 'es'

2️⃣ const object 사용하기

const LanguageCode {
  korean : 'ko',
  english : 'en',
  japanese : 'ja',
  chinese : 'zh',
  spanish : 'es',
} as const

type LanguageCodeType = typeof LanguageCode[keyof typeof LanguageCode]
profile
@binllionaire

4개의 댓글

comment-user-thumbnail
2023년 11월 14일

즐겁게 읽었습니다. 유용한 정보 감사합니다.

답글 달기
comment-user-thumbnail
2023년 11월 15일

enum의 문제점에서 끝나지 않고 대체해서 사용하는 방법을 코드 예시로 설명해두어서 더 잘 이해가 갔어요!!

문자형 enum에 대해 찾아보다가, 우아한 기술블로그에서 작성한 타스 코딩 컨벤션 정하기 관련 게시글에서 enum컨벤션 정하기와 관련된 아티클을 보아서 공유합니당 ! enum과 const enum과 const assertion 중에서 enum을 선택했더라구요!
아티클 공유하고 갑니다 !
https://techblog.woowahan.com/9804/#toc-1

답글 달기
comment-user-thumbnail
2023년 11월 15일

헉 예제까지 바꿔서 섬세하게...
자바스크립트를 쓰면서 가장 편하다고 생각했던게 type을 바꿔가면서 변수에 값을 할당할 수 있다는 거였는데 타스도 union type으로 가능하군뇨 . 하지만 너무 남발을 안좋을거같아요 본능적으로 느껴짐..

답글 달기
comment-user-thumbnail
2023년 11월 15일

언제 사용하는지에 대한 부분이나 사용 예시코드를 함께 제시해 주어 더욱 더 도움 된 내용이었던 거 같습니다 ! 감사합니다 🔥

답글 달기