Any Type

let someValue: any;

any 타입은 어떠한 타입의 값이든 이 변수에 할당 될 수 있다는 뜻이다.

let someValue: any = 10;
someValue= 'hellow world';
someValue= false;

한마디로 타입 체크 없이 아무거나 다 상관 없다는 것이다.

⚠️ 타입스크립트에서 의 일반적인 규칙은 타입에 관한 더 많은 정보를 명시할 수록 좋다. 타입에 대한 더 많은 정보가 제공이 될 수록 명확하게 개발자의 의도를 코드로 기술할 수 있고 타입 에러들을 컴파일 시 잡아냄으로서 코드가 좀 더 깔끔하고 효과적이게 유지보수 될 수 있다. 즉, Any Type 을 쓰는 경우 최대한 피하는 것이 좋다. 만약 작업중인 코드의 타입 명시가 어려운 경우 예를 들어 써드 파티 라이브러리에서 동적 컨텐츠를 가지고 와서 프로그램 작성시 에는 변수에 타입을 알기 어렵기 때문에 타입 지정을 할 수 없는 경우 이러한 경우에만 아주 제한적으로 any 타입을 사용하는 것이 좋다.

Union - 유니언 타입

어떤 타입이 변수에 들어올지는 정확히 알 수 는 없지만 변수의 타입이 무조건 숫자 혹은 문자열 이라는 것을 아는 경우
이런식으로 변수에 제한된 몇가지 타입들을 동시에 지정하고 싶을때, 사용되는 타입이 Union Type 이다.

Union type 사용 방법은 매우 간단 하다.

let someValue: number | boolean;

syntax 를 보면 단순히 파이프 기호를 중간에 넣고 조합될 타입들을 위 예시 처럼 그냥 구분만 해 주면 된다.
SomeValue 라는 이름을 가진 변수는 숫자 혹은 불리안 타입 둘중 아무 타입이 할당 될 수 있는 변수 이다.

Type Aliases

let totlaCost: number | string;
let orderID: number | string;

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

const findOrderID = (
  customer: { costomerID: number | string; name: string},
  productID: number | string
): void => {

};

type StrOrnNum = number | string;

그리고 코드에서 반복되고 있는 코드에 타입을 선언한 타입으로 다 바꿔 주면 끝 !

type StrOrNum = number | string;

let totalCost : StrOrNum; 
let orderID : StrOrNum;

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

const findOrderID = ( 
  customer: { costomerId: StrOrNum; name: string},
  productID: StrOrNum
): void => {};

Type Guard

스트링 타입과 넘버 타입이 조합된 유니언 타입을 타입으로 가지고 있는데 이렇게 함수로 전달 된 매개변수의 값을 넘버 타입을 가진 itemPrice 의 값으로 할당하는 코드 이다.

선언된 함수 밑에 sellItemPrice 함수를 불러주고, 숫자 50 을 넘겨주는데, itemPrice 에서 에러 메시지를 전달 하고 있는 상황이다.

에러의 이유는 price 매개변수가 숫자가 될 수도 있고 문자열이 될 수도 있기 때문이다.
만약 price 변수가 string value 일 경우, 숫자 타입을 가진 itemPrice 변수에 할당 될 수 없기 때문에 이러한 에러 메시지가 나타나게 되는 것이다.

🟣 해결 방법

자바스크립트에 내장 되어 있는 typeOf Operator 를 사용하는 방식이다.

Typeof 연산자와 조건문을 함께 사용함으로써 이러한 문제가 되는 코드를 fix 할 수 있다.

” Typeof Operator 는 변수의 데이터 타입을 반환 하는 연산자 ”

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

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

setItemPrice (50)

price 타입이 string 타입일 경우 전달된 매개변수가 string 값일 때 itemPrice 를 숫자 0 으로 할당 해준다.
그리고 else 를 주고 price 매개변수에 타입이 string 이 아닌경우 즉, 넘버 타입인 경우 전달된 price 의 value 를 itemPrice 에 그대로 할당 해준다.
그럼 코드에 에러메시지가 사라지게 된다.

Union 타입을 사용할 때 이렇게 typeof 연산자를 사용하여 코드 검증을 수행하는것 이것을 타입스크립트에서는 타입가드 (Type Guard)라고 한다.

typeof 이외에도 타입스크립트에서 type guard 방식이 몇가지 더 있는데, google 에 검색하면 쉽게 찾아 볼 수 있다.