반응형
Notice
Recent Posts
Recent Comments
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
Total
관리 메뉴

UP

Typescript : Any 타입, 유니언 타입, 타입 별칭, 타입 가드 본문

TypeScript

Typescript : Any 타입, 유니언 타입, 타입 별칭, 타입 가드

cijbest 2021. 5. 29. 23:41

Any 타입

  • 어떠한 타입이든 모두 가능
  • 타입을 명시할수록 개발자의 의도를 명확하게 코드화 할 수 있고 타입에러를 컴파일 시 잡아낼 수 있기 때문에 코드를 효과적으로 유지보수 할 수 있다. 그러므로 any 타입은 지양하는 것이 좋다.
  • 변수의 타입을 모를 경우에만 사용
let someValue: any = 5; // Any 타입
someValue = 'hello';
someValue = true;

 

유니언 타입

  • 제한된 타입들을 동시에 지정하고 싶을 때 사용(파이프라인 이용)
let price: number | string = 5; // 유니언 타입
price = 'free';
price = true; // 에러

price는 숫자나 문자 타입만을 지정할 수 있으므로 boolean 타입은 에러를 발생

 

타입 별칭(Type Aliases)

  • 같은 코드를 반복하지 않도록 코드를 타입으로 지정하여 재활용하는 방법
type StrOrNum = number | string; // Type Aliases
let totalCost: number;
let orderID: StrOrNum;

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

};

const findOrderID = (customer: { constomerId: StrOrNum, name: string}, 
    productID: StrOrNum): StrOrNum => {
        return orderID;
};

 

타입 가드(Type Guard)

  • 코드 검증을 수행하는 것
  • 타입 가드 방식 : Typeof Operator + 조건문
    • Typeof Operator : 변수의 데이터 타입을 반환하는 연산자
type StringOrNum = string | number;
let itemPrice: number;

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

setItemPrice(50);

타입에러

에러가 나는 이유는 price가 string일 때 number 타입의 itemPrice에 할당될 수 없기 때문이다.

그러므로 타입에 맞게 typeof 연산자로 타입을 조사하고 조건문을 적용하여 에러를 해결한다.

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

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

setItemPrice(50);




실습 코드 : https://github.com/cijbest/TIL/tree/master/TypeScript/%EC%8B%A4%EC%8A%B5/Day_6

공부 영상 출처 : [땅콩코딩] https://youtu.be/lmjQh2LrH94

반응형
Comments