우아한 타입스크립트 4장 타입 확장하기

4.1 타입 확장 하기

---

기본적으로 타입스크립트에서는 interface와 type 키워드를 사용해서 타입을 정의하고 extends, 교차타입, 유니온 타입을 사용하여 타입을 확장한다.

4.1.1 타입 확장의 장점

• 타입 확장의 가장 큰 장점은 코드 중복을 줄일 수 있다는 것이다.
• 기존에 작성한 타입을 바탕으로 타입 확장을 함으로써 불필요한 코드 중복을 줄일 수 있다.

interface 키워드를 사용하여 확장

type 키워드를 사용하여 확장

4.1.2 유니온 타입

• 유니온 타입은 2개 이상의 타입을 조합하여 사용하는 방법이다.
  • type MyUnion = A | B;
  • A 타입과 B 타입의 모든 값이 MyUnion 타입의 값이 된다.
• 유니온 타입으로 선언된 값은 유니온 타입에 포함된 모든 타입이 공통으로 갖고 있는 속성에만 접근할 수 있다.

유니온 타입

• 타입스크립트의 타입을 속성의 집합이 아니라 값의 집합이라고 생각해야 유니온 타입이 합집합이라는 개념을 이해할 수 있다.

4.1.3 교차 타입

• 교차타입은 교집합의 개념과 비슷하다.
  • type MyIntersection = A & B;
  • 집합의 관점에서 해석해보면 집합 MyIntersection의 모든 원소는 집합 A의 원소이자 집합 B의 원소임을 알 수 있다.
• BaedalProgress 교차 타입은 CookingStep 이 가진 속성과 DeliveryStep 이 가진 속성을 모두 만족하는 값의 타입(집합)이라고 해석할 수 있다.

교차 타입

• 교차 타입을 사용할 때 타입이 서로 호환되지 않는 경우도 있다.

• Universal 은 IdType 과 Numeric의 교차 타입이므로 두 타입을 모두 만족하는 경우에 유지된다.
• 따라서, Universal 의 타입은 number 가 된다.

4.1.4 extends 와 교차 타입

• extends 키워드를 사용해서 교차 타입을 작성할 수 있다.
• BaseCartItem 은 BaseMenuItem을 확장시킴.
  • BaseCartItem 은 BaseMenuItem의 속성을 모두 포함하는 상위 집합
  • BaseMenuItem 은 BaseCartItem 의 부분집합
• 유니온 타입과 교차 타입을 사용한 새로운 타입은 오직 type 키워드로 선언할 수 있다.

extends 사용 예시

type 사용 예시

 

• extends 키워드를 사용한 타입이 교차 타입과 100% 상응하지 않는다.

타입이 호환되지 않는다는 에러

 

• type 키워드는 교차 타입으로 선언되었을 때 새롭게 추가되는 속성에 대해 미리 알 수 없기 때문에 선언 시 에러가 발생하지 않는다.
• tip이라는 같은 속성에 대해 서로 호환되지 않는 타입이 선언되어 결국, never 타입이 된 것이다.

 

type DeliveryTip = {
	tip: number;
}

type Filter = {
	tip: string
} & DeliveryTip
// type 키워드는 교차타입으로 선언되었을 때 새롭게 추가되는 속성에 대해 미리 알 수 없어 선언시 에러가 발생하지 않는다.
// tip 이라는 속성에 대해 서로 호환되지 않는 타입이 선언되어 결국 never 타입

4.2 타입 좁히기 - 타입 가드

---

타입 좁히기는 변수 또는 표현식의 타입 범위를 더 작은 범위로 좁혀나가는 과정을 말한다.

정확하고 명시적인 타입 추론 및 복잡한 타입을 작은 범위로 축소하여 타입 안정성을 높인다.

4.2.1 타입 가드에 따라 분기 처리 하기

• 조건문과 타입 가드를 활용하여 변수나 표현식의 타입 범위를 좁힌다.
• 타입 가드는 런타임에 조건문을 사용하여 타입 검사하고 타입 범위를 좁혀주는 기능이다.
• 타입 가드는 크게 자바스크립트 연산자를 사용한 타입 가드와 사용자 정의 타입 가드로 구분할 수 있다.
  • 자바스크립트 연산자를 활용한 타입 가드 : typeof, instanceof, in과 같은 연산자 사용
    • 런타임에 유효한 타입 가드를 만들기 위해서 자바스크립트 연산자를 사용
  • 사용자 정의 타입 가드 : 사용자가 직접 어떤 타입으로 값을 좁힐지를 직접 지정하는 방식

4.2.2 원시 타입을 추론 할 때 : typeof 연산자 활용하기

• typeof 연산자를 활용하면 원시 타입에 대해 추론할 수 있다.
  • string, number, boolean, undefined, object, function, bigint, symbol
• null과 배열 타입 등이 object 타입으로 판별되는 등.. 복잡한 타입을 검증하기에는 한계가 있다.

4.2.3 인스턴스화된 객체 타입을 판별할 때 : instanceof 연산자 활용하기

• instanceof 연산자는 인스턴스화된 객체 타입을 판별하는 타입 가드로 사용할 수 있다.
• A instanceof B 형태로 사용하며 A에는 타입을 검사할 대상 변수, B에는 특정 객체의 생성자가 들어간다.
• instanceof는 A의 프로토타입 체인에 생성자 B 가 존재하는지 검사하여 존재하면 true, 아니면 false를 반환한다.

const onKeyDown = (event: React.KeyboardEvent) => {
	if (event.target instanceof HTMLInputElement && event.key === "Enter") {
		// event.target 의 타입이 HTMLInputElement 이며 event.key 가 "Enter" 인 경우 이다.
		event.target.blur();
		onCTAButtonClick(event);
	}
}

4.2.4 객체의 속성이 있는 지 없는지에 따른 구분 : in 연산자 활용하기

• 객체에 속성이 있는 지 확인한 다음에 true 혹은 false를 반환한다.
• A in B 형태로 사용하며, A라는 속성이 B 객체에 존재하는 지를 검사한다.
  • 프로토타입 체인으로 접근할 수 있는 속성이면 전부 true 반환한다.

type NoticeDialogProps = 
| BasicNoticeDialogProps
| NoticeDialogWithCookieProps;

// cookieKey를 갖는 NoticeDialogWithCookieProps 로 추론되고, 얼리 리턴을 했기에 if 문 스코프 밖에 위치하는 props 객체는 BasicNoticeDialogProps 타입으로 해석한다.
const NoticeDialog : React.FC<NoticeDialogProps> = (props) => {
	if ("cookieKey" in props) return <NoticeDialogWithCookie {...props} />;
	return <NoticeDialogBase {...props} />;
}

4.2.5 is 연산자로 사용자 정의 타입 가드 만들어 활용하기

• A is B 형태로 사용하며, A는 매개변수 이름이고 B는 타입이다.
• true/false의 진릿값을 반환하면서 반환 타입을 타입 명제로 지정하게 되면 반환 값이 참일 때, A 매개변수의 타입을 B 타입으로 취급하게 된다.

const isDestinationCode = (x:string): x is DestinationCode => destinationCodeList.includes(x);

 

• 만약에 isDestinationCode의 반환 값에 is를 사용하지 않고 boolean을 사용하면
   x의 타입을 좁히지 못하고 string 타입으로만 추론한다.
• is를 통해 반환값의 타입을 알려줌으로써 DestinationCode로 추론할 수 있다.

4.3 타입 좁히기 - 식별할 수 있는 유니온 (Discriminated Unions)

---

종종 태그 된 유니온 (Tagged Union)으로도 불리며, 식별할 수 있는 (Discriminated Unions) 유니온은 타입 좁히기에 종종 사용된다.

4.3.1 에러 정의하기 / 식별할 수 있는 유니온

• 예를 들어, 사용자의 유효성 검사를 위해
  • 텍스트 에러, 토스트 에러, 얼럿 에러가 있다고 가정하자.
  • 유효성 에러로, 에러 코드와 에러 메시지, 노출 방식에 대한 추가 정보가 필요할 것이다.

type TextError = {
	errorCode: string;
	errorMessage: string;
}

type ToastError = {
	errorCode: string;
	errorMessage: string;
	toastShowDuration: number; // 토스트 노출 시간
}

type AlertError = {
	errorCode: string;
	errorMesaage: string;
	onConfirm: () => void; // 얼럿 창 확인 버튼 누른뒤 액션
}

type ErrorFeedbackType = TextError | ToastError | AlertError;
const errorArr: ErrorFeedbackType[] = [
	{errorCode: "1", errorMessage: "텍스트 에러!"},
	{errorCode: "1", errorMessage: "토스트 에러!", toastShowDuration: 3000},
	{errorCode: "1", errorMessage: "얼럿 에러!", onConfirm: () => {}},
	
	...
	
	{errorCode: "1", errorMessage: "토스트 에러!", toastShowDuration: 3000, onConfirm: () => {}}
	// 타입 에러를 뱉어야 하지만, 타입 에러 발생 X
	// 이런 상황에 대해서 타입 에러가 발생하지 않는 다면 의미없는 에러 객체가 생겨날 수 있다.
]

 

에러 타입을 구분할 방법이 필요하다!

• 각 타입이 비슷한 구조를 가지지만 서로 호환되지 않도록 만들어주기 위해 타입들이 서로 포함관계를 가지지 않도록 정의
  • 식별할 수 있는 유니온을 활용
  • 타입마다 구분할 수 있는 판별자(태그)를 달아주어 포함 관계를 제거하는 것이다!

type TextError = {
	errorType: "TEXT"
	errorCode: string;
	errorMessage: string;
}

type ToastError = {
	errorType: "TOAST"
	errorCode: string;
	errorMessage: string;
	toastShowDuration: number; // 토스트 노출 시간
}

type AlertError = {
	errorType: "ALERT"
	errorCode: string;
	errorMesaage: string;
	onConfirm: () => void; // 얼럿 창 확인 버튼 누른뒤 액션
}

type ErrorFeedbackType = TextError | ToastError | AlertError;

4.3.2 식별할 수 있는 유니온의 판별자 선정

• 식별할 수 있는 유니온의 판별자는 유닛 타입으로 오직 하나의 정확한 값을 나타내는 타입을 말한다.
  • 다른 타입으로 쪼개지지 않고 오직 하나의 정확한 값을 가지는 타입을 말한다.
  • null, undefined, 리터럴 타입을 비롯해 true, 1 등.. 정확한 값을 나타내는 타입이 유닛 타입에 해당한다.
• 유니온의 판별자로 사용할 수 있는 타입
  • 리터럴 타입
  • 판별자로 선정한 값에 적어도 하나 이상의 유닛 타입이 포함되어야 하며, 인스턴스화할 수 있는 타입은 포함되지 않아야 한다.
    • void, string, number, Error 유닛 타입 적용 X

4.4 Exhaustiveness Checking으로 정확한 타입 분기 유지하기

---

• Exhaustiveness는 사전적으로 철저함, 완전함을 의미한다.
• Exhaustiveness Checking 은 모든 케이스에 대해 철저하게 타입을 검사하는 것이다.
  • 모든 케이스에 대한 타입 분기 처리를 해주지 않았을 때, 컴파일 타임 에러가 발생하게 하는 것.

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

const getProductName = (productPrice: ProductPrice): string => {
	if (productPrice === "10000") return "만원";
	if (productPrice === "20000") return "이만원";
	// if (productPrice === "5000") return "오천원";
	else {
		exhaustiveCheck(productPrice); // 컴파일타임 에러가 발생하도록
		return "상품권"
	}
}

// 매개변수를 never 타입으로 선언하여 매개 변수로 어떤 값도 받을 수 없으며 만일 값이 들어온다면 에러를 내뱉는다.
// 타입 처리 조건문 마지막 else 문에 사용하면 앞의 조건 문에서 모든 타입에 대한 분기 처리를 강제할 수 있다.
const exhaustiveCheck = (param: never) => {
	throw new Error("type error!");
};

• Exhaustiveness Checking을 활용하면 예상치 못한 런타임 에러를 방지하거나 요구사항이 변경되었을 때 생길 수 있는 위험성을 줄일 수 있다.
• 타입에 대한 철저한 분기 처리가 필요하다면 Exhaustiveness Checking 패턴을 활용해 보자.