TIL63. Union Type & Enums

조연정·2021년 1월 4일

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"); //오류발생. 이넘을 사용했기 때문에 이넘의 데이터만 넣어야한다.