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);
Author And Source
이 문제에 관하여(TS Any,Union Type, Type Aliases, Type Guards), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jackma914/TS-AnyUnion-Type-Type-Aliases-Type-Guards저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)