TS Any,Union Type, Type Aliases, Type Guards

📃 any type

any 타입은 어떠한 타입이든 모두 할당할수 있다는 뜻입니다.
한마디로 타입체크를 하지 않겠다는 뜻입니다.

let someV: any = 5;
someV = "hello";

하지만 타입스크립트는 타입에 관학 더많은 정보를 명시할 수록 더 좋습니다.
즉 any 타입은 최대한 피하는것이 좋습니다.

---

📃 union type

만약에 무슨 타입이 변수에 들어올지는 정확하게는 알수 없지만 숫자 아니면 문자열 둘중에 하나가 들어온다는걸 알고있을때 즉 제한된 타입들을 동시에 지정 하고 싶을때 사용합니다.
union type은 간단하게 사용 가능합니다. | 파이프를 이용해 구분합니다.

아래 예제를 보면 price를 스트링으로 재할당하면 에러 없이 잘 작동합니다. 하지만 불리언을 넣으면 에러가 발생합니다.

let price: number | string = 5;
price = "free";
price = true;

아래 예제처럼 같은 조합이 계속 반복될 경우에는 어떻게 코드를 향상 시킬수 있을가요?

let totalCost: number;
let orderId: number | string;

const calculateTotalCost = (price: number | string, qty: number): void => {};

const findOrderId = (
  customer: { costomerId: number | string; name: string },
  productId: number | string
): number | string => {
  return orderId;
};

이러한 경우에는 같은 코드를 반복하는 것 보다는 코드를 타입으로 지정하여 재활용하는것이 좋습니다. 이럴때 사용하는게 type aliases 입니다.

---

📃 Type Aliases

type 키워드를 사용해서 새로운 타입을 선언하는것이 타입 앨리어스 라고 합니다. 코드의 재사용 뿐만이 아닌 깔끔하게 정리하여 보기 좋게 만들수 있습니다.

type StrOrNum = number | string;

let totalCost: number;
let orderId: StrOrNum;

const calculateTotalCost = (price: StrOrNum, qty: number): void => {};

const findOrderId = (
  customer: { costomerId: StrOrNum; name: string },
  productId: StrOrNum
): StrOrNum => {
  return orderId;
};
export {};

---

📃 Type Guards

예시를 보면 매개변수 price는 스트링타입과 넘버타입이 조합된 유니온타입을 가지고있습니다. 이렇게 함수로 전달된 매개변수의 값이 itemPrice로 할당되는 함수입니다.

itemPrice에 에러가 발생합니다.
이유는 만약 price 매개변수가 string수도 있기때문입니다. 이 경우 itemPrice에 할당 될수 없기때문에 에러가 발생합니다.

type StrOrNum = number | string;

let itemPrice: number;

const setItemPrice = (price: StrOrNum): void => {
  itemPrice = price;
};

setItemPrice(50);

이경우 자바스크립트에 내장되어있는 typeof operator를 사용하는 방식입니다. typeof 연산자와 조건문을 함께 사용함으로써 이러한 코드를 고칠수 있습니다.

✔ typeof operator는 변수의 데이터 타입을 반환 하는 연산자입니다.

type StrOrNum = number | string;

let itemPrice: number;

const setItemPrice = (price: StrOrNum): void => {
  if (typeof price === "string") {
    itemPrice = 0;
  } else {
    itemPrice = price;
  }
};

setItemPrice(50);