Typescript - 4

튜플 타입

튜플은 길이와 타입이 고정되어 있다.
예로 숫자 다음에 문자열이 오는 배열을 원한다면 그렇게 선언해야만 한다.

const color: number[] =[232,323,141]
const color: [number,number,number] =[232,323,141]

2개의 차이점은 위 number[]은 rgb 컬러의 색상은 3개의 숫자들로 구성하는데 그 이상이 적힌다 하더라도 문제가 없다
하지만 아래처럼 튜플타입으로 정의할 경우 숫자의 3개만 받을 수 있도록 정의하여 정확히 고정된 값만 받을 수 있다

물론 혼합으로도 가능하다. 다만 사용할 때 항상 순서를 잘 지켜야 한다

type HTTPResponse = [number,string];

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

하지만 push를 할경우엔 오류가 나타나지 않는데

type HTTPResponse = [number,string];

const goodRes:HTTPResponse = [200, "OK"];
goodRes.push(123)

이 경우 튜플은 백그라운드에서 실행되는 배열이고 그래서 배열이 생성된 후 푸시를 사용하면 TS는 오류를 표시하지 않는다.
JS와 TS의 동작방식은 살펴보면 알 수 있는데 튜플의 한계이다
물론 pop() 또한 가능하다
하지만 많이 사용되진 않고 알고 있으면 좋으니 튜플은 이런거다 라고 생각만 해놓자

Enums

Typescript에만 있는 타입으로 다른 언어들에선 보이지만 Javascript에는 없는 타입이다
enum은 반복적으로 참조하는 값의 집합이 있을 경우 사용한다

const PENDING = 0;
const SHIPPED = 1;
const DELIVERED =2;

이렇게 쇼핑몰에서 상태를 나타내는 변수가 있다면 여기서 if문을 사용해 숫자로 조건을 판별해야할까?
그러면 코드면에서 말이 안된다. 확실하게 하기 위해 PENDING와 같이 명명된 상수를 사용하고 싶다. 이유는 값인2가 중요한것보다 코드를 확인할 때 DELIVERED 가 중요하기 때문

enum OrderStatus{
  PENDING,
  SHIPPED,
  DELIVERED
}

const myStatus = OrderStatus.DELIVERED

function isDelivered(status: OrderStatus) { //status는 4가지 옵션중 하나여야한다
	return status === OrderStatus.DELIVERED
}
isDelivered(OrderStatus.DELIVERED)

독립적인 변수나 별도의 타입을 설정하는 대신 주문상태를 포함하는 그룹을 만들었다.
각각 확인해보면 주문상태에 숫자들이 할당되어 있는데 현재는 각각 위에서부터 0,1,2순이다
deliver상태인지 확인하는 함수를 만들었고 매개변수인 status는 타입이 OrderStatus안의 4가지만 가능하다
이후 return값으로 들어온 매개변수의 값이 deliver상태와 동일한지 확인한다!
이때 숫자로 확인하는 것이 아닌OrderStatus.DELIVERED명명한 상수로 확인했기에 문제가 없다

이와 같이 아무것도 지정하지 않을경우 0부터 시작하지만 각자 값을 따로 지정할 수도 있고 아래 값들은 1씩 증가한 값을 할당한다.
또 모두 같은 타입일 필요는 없지만 대부분 같은 타입을 사용하니 기억하고 있자.

const enum OrderStatus{
  PENDING,
  SHIPPED,
  DELIVERED
}

하지만 enum은 javascript에 없기 때문에 실제로 변환 값을 보면 아주 복잡하게 작성되어 있는 것을 볼 수 있다.
그래서 위와 같이 const를 앞에 붙여줄경우 javscript로 컴파일 될 때 간단하게 나타나는 것을 확인할 수 있다.
물론 객체로 해도 충분하다. 이에 대해선 실제로 자주 분쟁이 일어나는 부분이라고 한다! 😂
자신이 옳다 생각하거나 팀 상황에 맞춰 쓸지 안쓸지 결정하면 될 것 같다