Typescript - Tuple(튜플)과 Enum 자료형

바닐라 JS에선 number, string, boolean, array, object의 자료형만 다뤘던 것 같은데 타입스크립트에선 새로운 자료형이 등장.

 

먼저 Tuple 자료형. 

 

예전에 파이썬 처음에 입문할 때 잠깐 봤던 거 같기도 한데...아닌가...

찾아보니깐 있네ㅎㅎ

 

어쨌든 타입스크립트 버전으로 봐야지 뭐

 

먼저 튜플의 정의를 간단하게 하면

길이와 순서가 정해져 있는 array 정도로 받아들이면 될 것 같다.

const color: [number, number, number] = [12, 32, 52];

위와 같은 식으로 타입을 정해준다는 것은

길이가 3이고 number만 와야하는 배열이 되어야함을 알려준다.

 

type HTTPResponse = [number, string];

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

이렇게 다른 타입도 당연히 선언 가능

 

튜플 다룰 때 조심해야 되는 건 array의 순서도 고려해야 한다는 것.

 

위의 예시에서

'ok', 200 이라고 하는 순간 타입스크립트가 응 아니야를 표시해줌

길이와 순서를 모두 고려해야함.

 

근데 튜플이

 goodRes.push(123);
 goodRes.pop();

좀 특이한게 길이랑 순서가 정해져있다면서 push나 pop가 같은 메소드는 잘만 사용함.

스택오버플로우에도 이런 질문이 한 바가지 있다는 타입스크립트 만든 사람의 소소한 오류라고 생각하는 게 좋을 듯. 

 

const responses: HTTPResponse[] = [
	[404, "not found"],
	[200, "OK"],
];

물론 당연히 이렇게 튜플도 배열로 활용 가능

 

이번엔 Enum을 보자.

 

내 뇌피셜로 정리하자면

고유값 사전? 이라고 표현할 수 있을 것 같다. 

 

enum OrderStatus {
	PENDING = 10,
	SHIPPED = 34,
	DELIVERED = 324,
	RETURNED = 98,
}

이런 식으로 각 상태에 대해 번호를 부여해서 뒤에서 그냥 불러오는 것으로 활용 가능

const myStatus = OrderStatus.DELIVERED;

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

isDelivered(OrderStatus.RETURNED);

이런 식으로 숫자로 하드코딩하는 대신 enum의 데이터 값을 활용하여 함수 만들기로 가능.

 

물론 enum 안에 키 값에 무조건 number나 string만 써야하는 건 아니지만 관습적으로 한 가지의 타입만 쓴단다.

 

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

ArrowKeys.LEFT;

이건 string을 활용해서 만든 enum 자료형

 

 

새로운 개념이라 좀 생소할 수도 있지만 결국엔 알고 있던 배열과 object 자료형에 좀 더 디테일이 가미된 애들이다.

얘네들이 당연히 기본 타입들보다는 좀 덜 쓰이지만 그래도 익숙해질 필요가 있는 친구들.