유니온 타입

유니온 타입?

두가지 이상의 타입으로 어노테이션을 줘야할 때, 유니온 타입을 사용합니다.
| (or) 기호를 사용해서 구현할 수 있습니다. 아래는 유니온 타입의 예시입니다.

// Basic Union Type:
let age: number | string = 21;
age = 23;
age = "24";

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

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

// Union type with type aliases
let coordinates: Point | Loc = { x: 1, y: 34 };
coordinates = { lat: 321.213, long: 23.334 };

유니온 타입 응용하기

유니온 타입이지만, 원하는 결과에 따라 각각 다른 로직을 적용해줄 수 있습니다.
아래는 숫자 or 문자열($숫자)을 입력 받아서 같은 결과값을 출력해주는 함수의 예시입니다.

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

배열에 유니온 타입 적용

괄호로 감싸서 어노테이션 주면 됩니다.

const stuff: (number | string)[] = [1,2,3, "das"]

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

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

const coords: (Point | Loc)[] = [];
coords.push({ lat: 321.213, long: 23.334 });
coords.push({ x: 213, y: 43 });

리터럴 타입

리터럴을 미리 어노테이션 해주는 것 입니다. 이를 통해서 결과값 혹은 입력값등을 한정지어줄 수 있습니다.

let zero: 0 = 0;
let mood: "Happy" | "Sad" = "Happy";
mood = "Sad";

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

let today: DayOfWeek = "Sunday";

튜플(Tuple)과 Enum

튜플

튜플은 자바스크립트에는 없고, 타입스크립트에만 있습니다.
기본적으로 배열의 구조를 갖고 있지만, 크기(배열 길이)와 각 인덱스에 들어가는 타입도 정해져있습니다. 이는 어노테이션을 줄때 배열 안에 타입을 선언해줍니다. 아래의 코드를 예시로 보면 되겠습니다.

하지만 한계가 있습니다. push와 pop같은 할당 이후에 추가적으로 할당하는 부분에 있어서는 타입스크립트가 잡아주지 못합니다.

// This is a tuple!
const color: [number, number, number] = [255, 0, 45];

type HTTPResponse = [number, string];

const goodRes: HTTPResponse = [200, "OK"];

// An array of tuples:
const responses: HTTPResponse[] = [
  [404, "Not Found"],
  [200, "OK"],
];

Enum

Enum(이넘)은 자바스크립트에는 없고, 타입스크립트에만 있습니다.
enum은 열거형 변수로 정수를 하나로 합칠 때 편리한 기능입니다. 임의의 숫자나 문자열을 할당할 수 있으며 하나의 유형으로 사용해서 버그를 줄일 수 있습니다.

Enum을 사용했을 때 얻을 수 있는 추가적 장점입니다.
상수를 사용할때보다 IDE의 적극적인 지원을 받을 수 있고 변경범위가 줄어듭니다.

enum은 편리한 기능이지만 TypeScript가 자체적으로 구현했기 때문에 발생하는 문제가 있습니다. Tree-shaking이 되지 않습니다. 이 때문에 사용하지 말라는 의견도 있는 것을 확인했습니다.

// Enum Example:
enum OrderStatus {
  PENDING,
  SHIPPED,
  DELIVERED,
  RETURNED,
}
const myStatus = OrderStatus.DELIVERED;

function isDelivered(status: OrderStatus) {
  return status === OrderStatus.DELIVERED;
}

isDelivered(OrderStatus.RETURNED);

// String Enum:
enum ArrowKeys {
  UP = "up",
  DOWN = "down",
  LEFT = "left",
  RIGHT = "right",
}