타입스크립트 정리4 : 유니온 타입, Tuple, Enum

Union 타입

유니온 타입을 사용하면 변수의 타입을 숫자 또는 문자열로 선언하거나

특정 함수 두 가지 모두 취하도록 선언할 수 있다.

숫자나 문자열에만 국한된 것이 아님

어떤 타입이든 가능하다

let age: number | string = 21;  // 숫자 또는 문자열로
age = 23;  // 숫자도 가능
age = "24";  // 문자열도 가능

number | string | boolean 이렇게 3가지도 가능하다. 권장되는 방식이 아니다.

원시 타입이 아닌 커스텀 객체 형식도 유니언 타입으로 취할 수 있다

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

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

let coordinates: Point | Loc = { x: 1, y: 34 };   // Point 형태와 Loc 형태 둘다 가능
coordinates = { lat: 321.213, long: 23.334 };

숫자나 문자열 타입인 파라미터를 취하는 함수를 작성한다

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

printAge(23)   // 가능. 오류표시가 뜨지 않는다.
printAge('23') // 가능. 오류표시가 뜨지 않는다 

Type Narrowing 타입 좁히기

function calculateTax(price: number | string, tax: number) { // price는 숫자와 문자열 모두 가능
  if (typeof price === "string") {  // 타입 좁히기. 문자열이라면
    price = parseFloat(price.replace("$", ""));  // 달러표시를 없애고 숫자로 바꾼다
  }
  return price * tax;   // 원하는 값 계산 후 리턴.
}ㄷ

받을 수 있는 파라미터의 타입을 정해놨지만, 형태가 다르게 들어올때 똑같이 계산하면 오류가 날 수 있다.

달러표시가 포함된 문자열도 같이 들어올때 처리하는 법. 타입 좁히기

타입스크립트는 우리가 어떤 작업을 하는지 파악할 정도로 똑똑하다

if문 안에 price가 문자열이면, if문 밖의 price가 number라는 걸 알아챈다.

배열과 유니언 타입

배열에도 유니언 타입을 적용할 수 있다

const stuff: (number | string)[] = [1,2,3, "das"]  // 숫자나 문자열이 들어가는 배열이라는 뜻이다.
const stuff: number[] | string[] = ["asd", "asd", 1] // 오류표시가 난다. 숫자로된 배열 or 문자열로 된 배열 이라는 뜻.

커스텀 타입을 적용할 수도 있다.

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

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

const coords: (Point | Loc)[] = []; // Point형식 또는 Loc 형식이 요소로 들어있는 배열.
coords.push({ lat: 321.213, long: 23.334 }); // Loc형식이므로 오류표시 뜨지 않는다.
coords.push({ x: 213, y: 43 }); // Point형식이므로 오류표시 뜨지 않는다.

Literal Types 리터럴 타입

미리 정해둔 특정값을 정해두는 것. 원시타입이 아니라 구체적인 특정 값을.

보통 유니언 타입과 함께 쓴다

let zero: 0 = 0;  // 0이 아닌 다른 숫자를 할당하려고 하면 오류가 뜬다.
let zero = 424;   // 오류표시가 뜬다.

let mood: "Happy" | "Sad" = "Happy"; // 유니언 타입과 같이 쓴다. Happy나 Sad 둘 중 하나여야 한다는 뜻.
mood = "Sad";

커스텀 타입에서도 활용할수 있다

type DayOfWeek =  // 아래 나열된 문자열 중 하나여야 된다는 뜻. 다른 값이 할당되면 오류.
  | "Monday"
  | "Tuesday"
  | "Wednesday"
  | "Thursday"
  | "Friday"
  | "Saturday"
  | "Sunday";

let today: DayOfWeek = "Sunday";

Tuple

자바스크립트에는 없는 타입스크립트의 고유한 타입

고정된 길이를 갖는 배열이며 고정된 타입 세트로 순서가 정렬된다.

백그라운드에서 실행되는 정규 배열이다.

let myTuple: [number, string]  // 타입들이 순서대로 들어가있다

myTuple = [10, 'TypeScript is cool'];  // OK.

myTuple = ['TypeScript is cool', 10];   // 오류표시가 뜬다. 순서가 반대다

튜플은 길이와 타입이 고정되어 있다

따라서 위에는 숫자 다음에 문자열이 오는 배열을 원한다고 선언해야 한다

const color: [number, number, number] = [255, 0, 45];

튜플은 이런데 쓰면 좋다. rgb 컬러를 나타내는 배열을 만든다

단순히 number[] 로 하면 숫자 3개가 아닌 그 이상을 넣은 배열도 ok인데 그러면 rgb가 아니게 된다.

위처럼 쓰면 형태를 고정시킬 수 있다

타입스크립트에서 튜플이 설계되고 구현된 방식에는

튜플 생성 후에 추가 요소를 push하는 것을 막지 않는다

type HTTPResponse = [number, string];

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

goodRes.push(123)  // -> 이것이 오류표시가 뜨지 않는다는 말이다.

약간 반직관적인 특징이다.

튜플은 백그라운드에서 실행되는 배열이고 배열이 생성된 후 push하면 타입스크립트가 오류를 표시하지 않는것이다 이는 자바스크립트 배열의 작동 방식과 관련이 있다

Enum

역시 자바스크립트에는 없고 타입스크립트에만 있다

이넘 이라고 읽는다

enum은 많은 다른 프로그래밍 언어에서 사용된다

enum을 사용하면 명명된 상수 집합을 정의할 수 있다

반복적으로 참조하는 값의 집합이 있을 경우에 사용한다

장점: 반복적으로 사용되는 값을 자동완성 기능으로 쓸수있다.

enum 이름 {
	값의 목록,
	값의 목록
}

이런 형태로 사용한다

enum OrderStatus {
  PENDING,
  SHIPPED,
  DELIVERED,
  RETURNED,
}
const myStatus = OrderStatus.DELIVERED;

vscode에서 마우스 커서를 올리면 각각에 숫자가 할당되어 있다. 0부터 시작

이렇게 하면 OrderStatus를 어디서든 참조할 수 있다

이런식으로 상태를 재사용할 수 있는 것이다.

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

isDelivered(OrderStatus.RETURNED);

상태값은 자동적으로 부여되는 0부터 숫자가 아닌 다른 숫자나 문자열로 할당할수도 있다

enum ArrowKeys {
  UP = "up",
  DOWN = "down",
  LEFT = "left",
  RIGHT = "right",
}ㅇ 

ㅇ

이렇게 하면 ArrowKeys.LEFT 라고 쓰면 문자열 ‘left’가 나타난다

한 묶음의 이름을 enum에 지정하면 계속해서 참조가 가능하고 편리하게 자동 완성 기능을 쓸수있다

그게 바로 enum의 기능

if(move === "left') // 이렇게 입력하는 대신에

if(move === ArrowKeys  // A만 입력하면 자동완성이 뜨고, 선택할수 있는 4가지가 뜬다.

Enum이 컴파일되면

타입스크립트 내의 대부분은 컴파일된 자바스크립트에서 제거되지만

enum은 자바스크립트에 영향을 미치게 된다 추가적인 코드로 나타남

타입스크립트에서 간단하게 작성한 enum은

자바스크립트에서는 함수에 객체들로 생성되는데 꽤 복잡하다

현재 타입스크립트는 자바스크립트에 더 밀접하게 되어 코드에 영향을 미치는 새로운 부분이나

새로운 구문을 생성하지 않는 방향으로 발전하기 때문에 이런 방식을 안좋아하는 사람들도 있다

enum은 초기 기능이기 때문에 남아있음.

복잡한 객체를 자바스크립트에 남기지 않고 싶다면

enum OrderStatus {  // 이렇게 하지 말고
  PENDING,
  SHIPPED,
  DELIVERED,
  RETURNED,
}

const enum OrderStatus {  // 앞에 const를 붙이면 자바스크립트에서는 숫자만 보인다. 상태값 숫자.
  PENDING,
  SHIPPED,
  DELIVERED,
  RETURNED,
}

이때 사용하는 const는 일반적으로 사용하는 const와는 다르다. 이런 방식은 일종의 타협점.