[TS] 튜플(Tuple)과 Enum

🔷 튜플(Tuple)

TypesScript만의 고유한 타입으로 고정된 길이와 타입을 가지는 배열이다

튜플 사용하기

배열 대괄호 안에 원하는 타입을 순서대로 입력한다
[type, type, type, … ]

number[ ]
기존에 사용하던 숫자배열은 숫자 몇개를 나열해도 오류를 나타내지 않지만

[number, number, number]
튜플은 정해진 길이를 넘거나 다른 타입이 들어오면 오류를 나타낸다

튜플 혼합

튜플은 어떻게든 그 타입을 따르기만 하는 것이 아니라
타입 순서를 따르는 것도 중요하다

type HTTPResponse = [number, string]
반드시 number가 먼저 나온 다음에 string이 나와야한다

그런데 res1 에서 string이 먼저 나오고 number가 나왔기 때문에 오류를 나타낸다

튜플의 한계

똑똑해보이는 튜플에도 허점이 있다
튜플은 생성 후에 추가 요소를 push() 하거나 pop() 하는 것을 막지 않는다

튜플은 백그라운드에서 실행되는 배열이라
배열이 생성된 후 push나 pop을 사용해도 TypeScript가 오류를 표시하지 않는다고 한다

다행인 점은 튜플을 사용할 일이 그다지 많지 않다는 것!

push(123)   shift()   pop()
  ↳ 모두 오류없이 진행되는 것을 알 수 있다

🔷 Enum

TypesScript만의 고유한 타입으로 코드 전체에서 재사용할 수 있는 명명된 상수의 집합이다

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

Enum 사용하기

enum 키워드 + 이름 + 중괄호 + 중괄호 내부에 값 입력
이름은 대체로 대문자로 시작한다

enum Name { // 값 입력 }

Enum을 생성하고 그 중 하나의 값을 result에 저장하였다
이 변수를 console에 찍어보니 숫자 2가 출력된다

이 코드에는 숫자가 하나도 없는데 어떻게 된 일 일까?🤔

Enum을 생성하면 TypeScript는 기본적으로 0부터 시작하는 숫자 값을 차례대로 할당한다

그래서 Enum 내부의 각 항목에 마우스를 올려보면 숫자가 하나씩 차례대로 할당되어 있는 것을 확인할 수 있다

isDelivered의 매개변수 status의 타입은 OrderStatus 이다
즉, status는 'PENDING', 'SHIPPED', 'DELIVERED', 'RETURNED' 이 4가지만 가능하다

1. 첫번째 console
   매개변수로 3을 넘겨줬더니 true라는 값이 나왔다
   OrderStatus.RETURNED이 결국 3과 같기 때문이다

2. 두번째 console
   매개변수로 OrderStatus.RETURNED를 넘겨줬더니 true라는 값이 나왔다
   비교대상과 똑같은 형태이기 때문이다

Enum 값 지정하기

Enum의 값을 따로 지정하기 위해서는 지정할 항목 뒤에 등호를 쓴 뒤 원하는 값을 작성해준다
항목 = 원하는값

값을 지정할 때는 모두 같은 타입이 아니어도 된다
모든 항목이 숫자일 필요도, 문자일 필요도 없기 때문에 값을 전부 다르게 지정할 수 있다
하지만 이러한 방식은 잘 사용하지 않으며 대부분 같은 타입을 사용한다

1. 숫자

위에서는 PENDING = 10 으로 값을 지정해주었다
이렇게 하나의 값을 지정해주고 나면

SHIPPED = 11
DELIVERED = 12
RETURNED = 13

나머지 값들은 지정한 값을 기준으로 1씩 증가하며 차례대로 할당이 된다

2. 문자열

enum 컴파일링

대부분의 TypeScript 코드는 컴파일링시 JavaScript에서 거의 제거 되지만
Enum은 JavaScript에 영향을 미친다

EX )

Enum이 포함된 코드를 컴파일링하면
복잡한 형태로 변환된 JavaScript를 확인할 수 있다

위 코드에 const 키워드를 추가하였다
Enum 앞에 쓰인 const 키워드는 평상시에 사용하던 변수선언 키워드와 다르다

Enum 앞에 const를 붙이면
① 컴파일링시 JavaScript에서 Enum의 존재 자체를 삭제하고
② Enum을 참조하는 값이 있다면 지정된 값으로 대체한다