TypeScript 6회차 - Any 타입, Union 타입, 타입 가드, 타입 별칭

https://www.youtube.com/watch?v=lmjQh2LrH94&t=3s

Any 타입

어떤 타입의 값이든 할당 될 수 있다. 타입 체크를 안하겠다는 것.

let someValue: any = 5;
someValue = 'hello';
someValue = true;

숫자 타입으로 지정된 변수에 string 값을 넣어도 boolean 값을 넣어도 에러가 발생하지 않는다.

하지만!
타입에 관한 더 많은 정보를 명시할수록 더 명확하게 개발자의 의도를 코드로 기술할 수 있고 타입 에러들을 컴파일 시 잡아냄으로써 효과적인 코드 유지보수 가능하다. any타입은 최대한 피하는 것이 좋다.

작업중인 코드의 타입명시가 어려운 경우에만 아주 제한적으로 any 타입 사용 권장된다.

Union 타입

변수에 무슨 타입이 들어올지 정확하진 않은데 숫자형이나 문자형인 것은 아는 경우 제한된 타입들을 동시에 여러개 지정 하고 싶을때
=> 유니언 타입 사용.

파이프 기호를 조합될 타입들 사이에 넣기만 하면 된다.

ex) let someValue: number | string
someValue는 number나 string 두 타입 중 하나가 할당될 수 있는 변수.

 let price: number | string = 5;
 price = 'free';

price = true;
이렇게 price에 지정된 타입이 아닌 boolean 타입을 대입하면

Type 'boolean' is not assignable to type 'string | number'.
에러가 발생한다.

타입 별칭 (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: { customerId: StrOrNum, name: string}, productId: StrOrNum): StrOrNum => {
    return orderID;
}

Type Guards

유니언 타입을 사용할 때 typeof operator를 사용하여 타입 검증을 수행하는 것.

또다른 타입가드의 형식은 구글에 typescript type guards라고 검색하자.
(공식문서: http://www.typescriptlang.org/docs/handbook/advanced-types.html)

 type StringOrNum = string | number;

 let itemPrice: number;

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

setItemPrice(50);

string 타입과 number 타입이 조합된 유니언 타입을 타입으로 가지는 매개변수 price.
number 타입을 가진 itemPrice 변수에, 함수로 전달된 string이나 number 타입을 가지는 매개변수 price의 값을 할당하는 코드.

이럴경우 price에 string 타입이 들어오면 number 타입을 가진 itemPrice에 price를 할당할 수 없기 때문에 에러 발생.

해결법: JavaScript에 내장된 함수인 Typeof Operator 사용.
Typeof 연산자와 조건문 사용으로 해결 가능.
Typeof Operator는 변수의 데이터 타입을 반환 하는 연산자

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

setItemPrice(50);

위와 같은 방법으로 해결 가능하다.