[TS] Union Types + Literal

✅ Union Types

유니온 타입이란 JavaScript의 OR 연산자( || )와 같이 A이거나 B라는 의미의 타입이다. 즉, 유니온 타입을 이용하면 여러 타입의 값을 가질 수 있게된다. 

let age: number | string | boolean = 21;
age = 23;
age = "24";
age = true;

적절한 예시는 아니지만 간단한 예시로 유니온 타입을 사용했다. age는 세개의 Type 중 어느 것을 사용해도 상관 없다. 

type Point = {
  x: number;
  y: number;
};

type Loc = {
  lat: number;
  long: number;
};

let coordinates: Point | Loc = { x: 1, y: 34 };
coordinates = { lat: 321.214, long: 23.445 };

초기 값으로 설정한 객체는 Point 타입의 패턴을 따르고, 재할당한 객체는 Loc 타입의 패턴을 따르기에 문제가 없다.

🤔 함수에서의 유니온 타입

function printAge(age: number | string) {
  console.log(`You rae ${age} years old`);
}

매개변수 age가 number 혹은 string을 타입으로 받는 기본적인 형태이다.

function calculateTax(price: number | string, tax: number) {
  return price * tax;
}

위 코드는 에러가 발생한다. price의 타입이 number | string 이기에, string이 올 경우 산술 연산이 불가하기 때문이다.

The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

price.replace("$", "")
  // return price * tax

문자열에 $이 포함된 경우 빈 문자열로 바꿀려고 하는데 해당 코드 또한 에러가 발생한다. number타입엔 $가 포함돼서 올 수 없기 때문이다. 위와 같은 문제들을 해결하기 위한 방법은 무엇일까? 바로 타입 좁히기(Type Narrowing)를 적용하면 된다. 

👊 타입 좁히기(Type Narrowing)

타입 에러를 피하기 위해 타입을 더 정확한 타입으로 변할 수 있다.

function calculateTax(price: number | string, tax: number) {
  if (typeof price === "string") {
    price = parseFloat(price.replace("$", ""));
  }
  return price * tax;
}

조건문을 사용하여 해당 타입일 경우 수행하는 동작이 달라지게 하여 오류를 피할 수 있다. price가 string일 경우 파싱과 부동수 처리를 통해 숫자로 변환되어 정상적인 연산이 실행된다. 

👉 유니온 타입과 배열

const stuff: (number | string)[] = [1,2,'3','str']

number와 string을 타입으로 갖는 배열을 만들었다. 해당 유니온 타입은 꼭 괄호로 감싸주어야 한다. 괄호로 감싸지 않으면 string 타입을 갖는 배열 혹은 number 원시값 타입을 갖게 된다.  

const stuff: number[] | string[] = [1,2,'3','str'] // Error

비슷해보이지만 염연히 다른 두 코드이다. 위 배열은 number타입만 갖거나, string만 갖는 배열을 만들 수 있다.

const coords: (Point | Loc)[] = [];
coords.push({ lat: 321.214, long: 23.445 });
coords.push({ x: 80, y: 90, lat: 32.2 });

위와 같이 커스텀 타입도 선언할 수 있다. 

 

✅ Literal Types

리터럴 타입은 말 그대로 리터럴 자체를 타입으로 지정하는 것이다.

let zero: 0 = 0;

zero라는 변수는 0 말고는 할당할 수 없다. 숫자 타입이 아닌 숫자 0을 타입 선언한 것이다. 리터럴 타입을 혼자 사용하는 건 의미가 없어도 유니온 타입에 리터럴 타입을 활용하는 방법은 유용하다.

const giveAnswer = (answer: "yes" | "no" | "maybe") => {
  return `The answer is ${answer}.`;
};

⭕ giveAnswer("no");
❌ giveAnswer("oh no");

type DayOfWeek = "Monday" | "Tuesdaty" | "Wednesday" | "Thursday" | "Friday" | 'Saturday' | "Sunday";

let today: DayOfWeek = "Friday"

리터럴 타입을 다양하게 활용할 수 있다.