TIL-2024/08/24

extends를 통한 타입 확장에도 타입이 상응하지 않는 경우

interface DeliveryTip {
	tip: number;
}

interface Filter extends Delivery {
	tip: string;
}

→ Delivery를 확장한 Filter 타입에 tip이라는 속성에 대해서 서로 다른 타입이 선언되어 있는 경우, 두 타입이 상응하지 않기 때문에 타입 호환 에러가 발생한다.

type Delivery = {
	tip: number;
}

type Filter = Delivery & {
	tip: string;
}

→ 교차 타입으로 선언해준 경우 이전과 달리 에러는 발생하지 않지만, tip 속성의 타입이 호환되지 않는 타입이 선언되었기 때문에 never로 변한다.

타입 가드 활용

타입 확장과 달리 타입 범위를 좁힘으로서 명시적으로 타입 추론을 가능하게 함.

typeof

원시 타입(string, number, …)을 추론하는 경우 사용

const replaceHypen: (date: string | Date) => string | Date = (date) => {
	if (typeof date === 'string') {
		return date.replace(/-/g, '/');
	}
	
	return date;
}

instanceof

인스턴스화된 객체 타입을 판별하는 경우 사용

const onKeyDonw = (event: React.KeyboardEvent) => {
	if (event.target instanceof HTMLInputElement && event.key === 'Enter') {
		event.target.blur();
		...
	}
}

Exhaustiveness Checking을 활용한 타입 분기 유지

타입 분기에 대한 모든 케이스를 검사해서 타입 좁히기에 사용하는 패러다임 중 하나.

모든 타입 분기에 대한 처리를 해주어야하는 경우에 실수를 방지할 수 있다.

그리고 이후 유지보수 단계에서 분기가 추가되는 경우 엄격하게 관리 가능하다.

type ProductPrice = '10000' | '20000' | '5000';

const getProductName = (productPrice: ProductPrice): string => {
	if (productPrice === '10000') return '상품권 1만원 권';
	if (productPrice === '20000') return '상품권 2만원 권';
	// 	if (productPrice === '5000') return '상품권 5천원 권';
	
	else {
		exhaustiveCheck(productPrice); // Error: Argument of type 'string' is not Assign
		return('상품권')
	}
}

const exhaustiveCheck = (param: never) => {
	throw new Error('type error!');
}

param의 타입이 never인 함수를 else문에 넣음으로서 분기처리되지 않아서 해당 로직이 실행되면, 에러가 발생하게 되어 에러를 사전에 방지할 수 있다.