[우아한 타입스크립트] 4장

📍 타입 확장하기

타입 확장은 기존 타입을 사용해 새로운 타입을 정의하는 것을 말한다.

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

 

타입 확장의 장점

타입 확장의 큰 장점은 코드 중복을 줄일 수 있다는 것이다.

중복되는 타입을 반복적으로 선언하는 것보다 기존에 작성한 타입을 바탕으로 타입 확장을 함으로써 불필요한 코드 중복을 줄일 수 있다.

type BaseMenuItem = {
  itemName: string | nill;
  itemImageUrl: string | null;
  itemDiscountAmount: number;
  stock: number | null;
};

type BaseCartItem = {
  quantity: number;
} & BaseMenuItem;

 

유니온 타입

유니온 타입은 2개 이상의 타입을 조합하여 사용하는 방법이다.

type MyUnion = A | B;

A와 B의 유니온 타입인 MyUnion은 타입 A와 B의 합집합이다.

집합 A의 모든 원소, 집합 B의 모든 원소는 집합 MyUnion의 원소이다.

유니온 타입으로 선언된 값은 유니온 타입에 포함된 모든 타입이 공통으로 갖고 있는 속성에만 접근할 수 있다.

 

교차 타입

교차 타입은 기존 타입을 합쳐 필요한 모든 기능을 가진 하나의 타입을 만드는 것으로 이해할 수 있다.

interface CookingStep {
  orderId: string;
  time: number;
  price: number;
}

interface DeliveryStep {
  orderId: string;
  time: number;
  distance: string;
}

type BaedalProgress = CookingStep & DeliveryStep;

BaedalProgress는 CookingStep과 DeliveryStep 타입을 합쳐 모든 속성을 가진 단일 타입이 된다.

 

type MyIntersection = A & B;

교차 타입은 교집합의 개념과 비슷하다.

MyIntersection 타입의 모든 값은 A타입과 B 타입의 값이다.

 

extends와 교차 타입

type BaseMenuItem {
  itemName: string | null;
  itemImageUrl: string | null;
  itemDiscountAmount: number;
  stock: number | null;
};

type BaseCartItem {
  quantity: number;
} & BaseMenuItem;

const baseCartItem: BaseCartItem = {
  itemName: "떡볶이",
  itemImageUrl: "https://www.wowoo/fwfw.png",
  itemDiscountAmount: 200,
  stck: 100,
  quantity: 2,
};

 

 

BaseCartItem은 quantity라는 새로운 속성과 BaseMenuItem의 모든 속성을 가진 단일 타입이다.

유니온 타입과 교차 타입을 사용한 새로운 타입은 오직 type으로만 선언할 수 있다.

 

 

🛡️ 타입 좁히기 - 타입 가드

 

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

타입스크립트에서의 분기 처리는 조건문과 타입 가드를 활용하여 변수나 표현식의 타입 범위를 좁혀 다양한 상황에 따라 다른 동작을 수행하는 것을 말한다.

타입 가드는 런타임에 조건문을 사용해 타입을 검사하고 타입 범위를 좁혀주는 기능을 말한다.

 

타입스크립트로 개발 시 여러 타입을 할당할 수 있는 스코프에서 특정 타입을 조건으로 만들어 분기 처리하고 싶을 때가 있다.

여러 타입을 할당할 수 있다는 것은 변수가 유니온 타입 또는 any 타입 등 여러 타입을 받을 수 있다는 것을 말하는데 조건으로 검사하려는 타입보다 넓은 범위를 갖고 있다.

스코프
타입스크립트에서 스코프는 변수와 함수 등의 식별자가 유효한 범위를 나타낸다.
즉, 변수와 함수를 선언하거나 사용할 수 있는 영역을 말한다.

 

타입 가드는 크게 자바스크립트 연산자를 사용한 타입 가드와 사용자 정의 타입 가드로 구분 가능하다.

자바스크립트 연산자를 활용한 타입 가드는 typeof, instanceof, in과 같은 연산자를 사용해 제어문으로 특정 타입 값을 가질 수밖에 없는 상황을 유도하여 자연스럽게 타입을 좁히는 방식이다.

자바스크립트 연산자를 사용하는 이유는 런타임에 유효한 타입 가드를 만들기 위해서다.

 

사용자 정의 타입 가드는 사용자가 직접 어떤 타입으로 값을 좁힐지를 직접 지정하는 방식이다.

 

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

typeof 연산자를 활용하면 원시 타입에 대해 추론할 수 있다. typeof A === B를 조건으로 분기 처리하면, 해당 분기 내에서는 A의 타입이 B로 추론된다.

typeof 연산자는 주로 원시 타입을 좁히는 용도로만 사용할 것을 권장한다.

- string, number, boolean, undefined, object, function, bigint, symbol

const replaceHyphen: (date: string | Date) => string | Date = (date) => {
  if (typeof date === "string") {
    // 이 분기에서는 date의 타입이 string으로 추론된다
  	return date.replace(/-/g, "/");
  }
  
  return date;
};

 

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

instanceof 연산자는 인스턴스화된 객체 타입을 판별하는 타입 가드로 사용할 수 있다.

A instanceof B 형태로 사용하며 A에는 타입을 검사할 대상 변수, B에는 특정 객체의 생성자가 들어간다.

instanceof는 A의 프로토타입 체인에 생성자 B가 존재하는지를 검사해 존재한다면 true, 그렇지 않다면 false를 반환한다.

 

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

in 연산자는 객체에 속성이 있는지 확인한 다음에 true나 false를 반환한다.

in 연산자를 사용하면 속성이 있는지 없는지에 따라 객체 타입을 구분할 수 있다.

in 연산자는 A in B의 형태로 사용하는데 이름 그대로 A라는 속성이 B 객체에 존재하는지를 검사한다.

 

자바스크립트의 in 연산자는 런타임의 값만을 검사하지만 타입스크립트에서는 객체 타입에 속성이 존재하는지를 검사한다.

여러 객체 타입을 유니온 타입으로 가지고 있을 때 in 연산자를 사용해 속성의 유무에 따라 조건 분기를 할 수 있다.

 

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

직접 타임 가드 함수를 만들 수 있는데 이런 방식의 타입 가드는 반환 타입이 타입 명제인 함수를 정의하여 사용할 수 있다.

타입 명제는 A is B 형식으로 작성하면 되는데 여기서 A는 매개변수 이름이고 B는 타입이다.

타입 명제
타입 명제는 함수의 반환 타입에 대한 타입 가드를 수행하기 위해 사용되는 특별한 형태의 함수이다.

 

 

🤩 타입 좁히기 - 식별할 수 있는 유니온

태그 된 유니온으로도 불리는 식별할 수 있는 유니온은 타입 좁히기에 널리 사용되는 방식이다.

 

에러 정의하기

type ErrorFeedbackType = TextError | ToastError | AlertError;
const errorArr: ErrorFeedbackType[] = [
  { errorCode: "100", errorMessage: "텍스트 에러" },
  { errorCode: "200", errorMessage: "토스트 에러", toastShowDuration: 3000 },
  { errorCode: "300", errorMessage: "얼럿 에러", onConfirm: () => {} },
};

 

식별할 수 있는 유니온

에러 타입을 구분할 방법이 필요하다. 각 타입이 비슷한 구조를 가지지만 서로 호환되지 않도록 만들어주기 위해서는 타입들이 서로 포함 관계를 가지지 않도록 정의해야 한다.

식별할 수 있는 유니온이란 타입 간의 구조 호환을 막기 위해 타입마다 구분할 수 있는 판별자를 달아주어 포함 관계를 제거하는 것이다.

 

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

식별할 수 있는 유니온을 사용할 때 주의할 점이 있다.

식별할 수 있는 유니온의 판별자는 유닛 타입으로 선언되어야 정상적으로 동작한다.

유닛 타입은 다른 타입으로 쪼개지지 않고 오직 하나의 정확한 값을 가지는 타입을 말한다.

null, undefined, 리터럴 타입을 비롯해 true, 1 등 정확한 값을 나타내는 타입이 유닛 타입에 해당한다.

void, string, number와 같은 타입은 유닛 타입으로 적용되지 않는다.

 

 

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

Exhausitiveness 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 assignable to parameter of type 'never'
    return "배민상품권";
  }
};

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

위 코드에서처럼 모든 케이스에 대한 분기 처리를 해주지 않았을 때, 컴파일타임 에러가 발생하게 되는 것을 Exhaustiveness Checking이라고 한다.