1. Any type

• 이름에서 처럼 어떠한 값이 들어와도 에러없이 모두 사용 가능하게 만들어주는 타입이다.

let someValue : any // 어떠한 타입이든 모두 사용 가능

someValue = 23
someValue = 'name'
//이렇게 어떠한 값이 들어와도 에러없이 모두 사용 가능

타입스크립트에서는 타입에 관한 정보를 명시 해 줄수록 코드의 유지보수가 더 좋다. 그렇기 때문에 되도록이면 any type은 지양해주는것이 좋다.

2. Union Type

• 제한된 타입들을 동시에 지정하고 싶을때 사용한다.

let price : number | string = 5
// 변수명에 동시에 지정하고싶은 타입들을 '|'을 이용하여 타입을 지정

price = '2'
price = 3
price = false // union 타입으로 설정된 number, string에 해당되지 않기 때문에 에러가 발생하게 된다

그런데 'number | string'이러한 조합의 코드가 반복 된다면 어떠한 식으로 입력하면 코드를 더 향상 시킬수 있을까?

3. Type Aliases

• 같은 타입의 코드가 반복되는것을 타입으로 지정하고 그것을 재활용하는것을 Type Aliases라고 하는데 아래 예시 코드를 보면서 설명을 하겠다.

// 수정전

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

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

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

---------------------------------------------------------
  
// 수정후

type StrOrNum = number | string;
let totalCost: number;
let orderId: StrOrNum;

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

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

위의 수정전 코드내용을 보게되면 'number | string'타입이 연속적으로 계속해서 반복되고 있다. 그런데 수정후 코드 내용을 보게되면 연속으로 반복되는 타입을 type으로 따로 지정하여 관리를 하여 코드를 더욱 더 간결하게 표현하고 있다. 이러한 방법을 Type Aliases이다.

4. Type Guard

• union type을 사용할때 type of operator를 사용하여 코드검증하는것을 말하는데 이것을 type guard라고 부르며, 아래 예시코드를 통해서 보도록 하겠다.

type StringOrNum  = string | number;
let itemPrice : number;

const setItemPrice = (price: StringOrNum) : void => {
  itemPrice = price; // 파라미터의 타입이 StringOrNum 이기 때문에 string 타입도 포함되기 때문에 에러 발생
}

setItemPrice(90)

위와 같은 경우에는 type of operator를 사용하여 코드검증을 사용하여 에러를 잡아줄 수 있다.

• type of operator는 변수의 데이터 타입을 반환하는 연산자이다.

type StringOrNum = string | number;
let itemPrice: number;

const setItemPrice = (price: StringOrNum): void => {
  if (typeof price === "string") {
    //typeof 연산자 사용하여 코드검증
    itemPrice = 0;
  } else {
    itemPrice = price;
  }
};

setItemPrice(90);

typeof 연산자를 이용하여 위의 에러부분을 해결한 코드인데, 해석하자면 price의 타입이 string인 경우 itemPrice는 0을 반환하고 그렇지 않은 경우는 아래에서 호출한 함수의 인자값을 그대로 할당한다.