TIL63. Union Type & Enums

Union Type

특정 인자나 변수에 한가지 이상의 타입을 사용하고 싶을 때 사용한다.
자바스크립트의 OR연산자(||)와 같이 a이거나 b이다 라는 의미이다.

const MONG: string | number | boolean = "world";
function getMSG(value: string | number) {
  if (typeof value === "number") {
    value.toLocaleString();
  }
  if (typeof value === "string") {
    value.toString();
  }
  throw new TypeError("value must be string or number");
}

getMSG("hello");
getMSG(100);

'MONG'이란 변수에는 string, number, boolean 타입을 모두 사용할 수 있다.

Intersection

여러 타입을 모두 만족하는 하나의 타입을 의미한다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}
function askSomeone(someone: Developer & Person) {
  someone.name
  someone.skill
  someone.age
}

someone이라는 인자에 인터페이스 타입을 참조하였다. 이때 intersection을 사용하여 두가지 인터페이스가 가지고 있는 모든 속성을 사용할 수 있게된다.

Union Type VS Intersection

유니온 타입 주의점

유니온 타입은 A도 되고, B도 되는 타입이니까 인자 타입의 Developer, Person이 가지고 있는 속성 'age', 'skill'를 사용할 수 있겠지라고 생각하기 쉽다. 하지만, 함수를 호출하는 시점에 Developer타입이 올지 Person타입이 올지 알 수 없기때문에 어느 타입이 들어오든지 오류가 나지 않을 방향으로 타입을 추론하게 된다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer | Person) {
  someone.name // o 정상 동작
  someone.age // x 타입 오류
  someone.skill // x 타입 오류
}

결과적으로 함수 안에서는 별도의 타입가드를 이용하여 타입의 범위를 좁히지 않는 이상 Developer와 Person 두 타입에 공통적으로 들어있는 속성인 name에만 접근이 가능하다.

호출로 알아보는 차이점

//union type
function askSomeone(someone: Developer | Person) {
  someone.name;
}

askSomeone({ name: "mong", skill: "TS" });
askSomeone({ name: "jyj", age: 10 });

//intersection
function askSomeone(someone: Developer & Person) {
  someone.name;
  someone.skill;
  someone.age;
}

askSomeone({ name: "mong", skill: "TS", age: 10 });

Developer와 Person 타입의 속성을 모두 다 넣어주어야 오류가 발생하지 않는다. 즉, 두 개의 타입을 모두 포함한 새로운 하나의 타입이 만들어진 셈이다.

Enums

이넘은 특정 값들의 집합을 의미하는 자료형이다.쉽게말해, 연관된 아이템들을 함께 묶어서 표현할 수 있는 수단이다. TS에서는 숫자형이넘, 문자형이넘을 지원한다.

숫자형 이넘과 문자형 이넘

//숫자형 이넘
enum Number {
  One = 1,
  Two, //2
  Three, //3
  Four //4
}

위와 같이 숫자형 이넘을 선언할 때 초기값을 주면 초기값부터 1씩 증가하게 된다. 만약 초기값을 지정하지 않으면 0부터 차례로 증가한다.

//문자형 이넘
enum Answer {
  Yes = "Y",
  No = "N",
}

function yesOrNo(answer: Answer) {
  if (answer === Answer.Yes) {
    console.log("딩동댕");
  } else if (answer === Answer.No) {
    console.log("땡");
  }
}

yesOrNo(Answer.Yes);
yesOrNo("Yes"); //오류발생. 이넘을 사용했기 때문에 이넘의 데이터만 넣어야한다.

위의 예제에서 Yes를 다양한 형태의 값(ex. y, yes, 네...)으로 표현하고 싶을 때, 구체적인 값으로 제안하는 역할을 하는 것이 enum이다.

복합 이넘

이외에도 이넘에 문자와 숫자를 혼합하여 생성할 수 있다. 하지만 최대한 같은타입으로 이루어진 이넘을 사용하는 것이 권장된다.