Any와 유니언 타입, 타입 별칭, 타입 가드

1. Any 타입

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

• 어떠한 타입이든 모두 OK
• 타입체크 안하는 타입
• 다른 타입을 재할당해도 아무런 문제 없이 컴파일 됨
• 효과적인 코드의 유지 보수를 위해서는 Any 타입을 쓰는 것을 최대한 피하는 것이 좋음
• 타입 명시가 어려운 경우, 써드파티 라이브러리에서 동적 컨텐츠를 가져와서 프로그램 작성시에는 변수의 타입을 알 수 없어서 타입 지정을 할 수 없는 경우에만 제한적으로 Any 타입 사용
  
  

2. 유니언 타입 (Union type)

let price: number | string = 5;
price = 'free';
price = true; // 컴파일 에러

• 변수의 제한된 타입들을 동시에 지정하고 싶을 때
• 지정된 타입이 아닐 경우 컴파일 에러가 발생
  
  

interface Car {
	name: 'car';
	color: string;
	start(): void;
}

interface Mobile {
	name: 'mobile';
	color: string;
	call(): void;
}

function getGift(gift: Car | Mobile) {
	console.log(gift.color);
	if (gift.name === 'car') {
		gift.start();
	} else {
		gift.call();
	}
}

• 동일한 이름의 속성을 정의하고, 타입을 다르게 줌으로써 구분할 수 있음
• 검사해야할 항목이 많아지면 if 대신 switch 사용하는게 가독성이 좋음
• 식별가능한 유니언 타입 : 동일한 속성의 타입을 다르게 하면서 구분할 수 있는 것
  
  

3. 타입 별칭 (Type Aliases)

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

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

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

• 유니언 타입을 타입으로 갖는 변수나 함수가 코드 내에 여러 곳에 있을 때
• 같은 조합이 계속 반복될 경우 같은 코드를 반복하는 것 보다는 코드를 타입으로 지정하고 재활용
• type 키워드 뒤에 이름을 지어줌
• 코드의 재사용 뿐만이 아니라 가독성이 좋아지는 효과도 있음
  
  

4. 타입 가드 (Type Guard)

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

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

setItemPrice(50);

• price 매개변수가 유니언 타입(숫자와 문자열 둘다 가능)이어서 에러 발생
• 만일 price 타입이 문자열일 경우 숫자 타입을 가진 itemPrice 변수에 할당될 수 없음
  
  

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

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

setItemPrice(50);

• typeof 오퍼레이터와 조건문을 함께 사용하여 위의 에러 해결 가능
• typeof : 변수의 데이터 타입을 반환 하는 연산자
• 타입 가드 : typeof를 사용하여 코드 검증을 수행하는 것
• typeof 오퍼레이터 외에도 다른 타입 가드 방식이 있음
  
  

5. 교차 타입 (Intersection Types)

interface Car {
	name: string;
	start(): void;
}

interface Toy {
	name: string;
	color: string;
	price: number;
}

const toyCar: Toy & Car = {
	name: '타요',
	start() {},
	color: 'blue',
	price: 1000,
};

• 교차 타입 : 여러 타입을 합쳐주는 역할
• 유니언 타입은 or의 의미라면, 교차 타입은 and의 의미
• & 를 사용하서 타입을 작성, 모든 속성을 기입해주어야 함
  
  

참고 : 땅콩코딩,코딩앙마