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

📍 조건부 타입

타입스크립트에서 조건부 타입은 Condition ? A : B 형태를 가진다.

조건부 타입을 활용하면 중복되는 타입 코드를 제거하고 상황에 따라 적절한 타입을 얻을 수 있기 때문에 정확한 타입 추론이 가능하다.

 

extends와 제네릭을 활용한 조건부 타입

extends 키워드는 타입을 확장할 때와 타입을 조건부로 설정할 때 사용되며 제네릭 타입에서는 한정자 역할로도 사용된다.

T extends U ? X : Y

조건부 타입에서 extends를 사용할 때는 자바스크립트 삼항 연산자와 함께 쓴다.

위 표현은 타입 T를 U에 할당할 수 있으면 X 타입, 아니면 Y 타입으로 결정됨을 의미한다.

 

infer를 활용해서 타입 추론하기

extends를 사용할 때 infer 키워드를 사용할 수 있다.

infer는 타입을 추론하는 역할을 한다.

삼항 연산자를 사용한 조건문의 형태를 가지는데 extends로 조건을 서술하고 infer로 타입을 추론하는 방식을 취한다.

type UnpackPromise<T> = T extends Promise<infer K>[] ? K :any;

UnpackPromise 타입은 제네릭으로 T를 받아 T가 Promise로 래핑된 경우라면 K를 반환하고 그렇지 않은 경우에는 any를 반환한다.

Promise<infer K>는 Promise의 반환 값을 추론해 해당 값의 타입을 K로 한다는 의미이다.

 

 

 🌟 템플릿 리터럴 타입 활용하기

타입스크립트에서는 유니온 타입을 사용해 변수 타입을 특정 문자열로 지정할 수 있다.

type HeaderTag = "h1" | "h2" | "h3" | "h4" | "h5";

이 기능을 사용하면 컴파일타임의 변수에 할당되는 타입을 특정 문자열로 정확히 검사해 휴먼 에러를 방지할 수 있고 자동 완성 기능을 통해 개발 생산성을 높일 수 있다.

템플릿 리터럴 타입은 자바스크립트의 템플릿 리터럴 문법을 사용해 특정 문자열에 대한 타입을 선언할 수 있는 기능이다.

type Heading Number =  1 | 2 | 3 | 4 | 5;
type HeaderTag = `h${HeadingNumber}`;

type Vertical = "top" | "bottom";
type Horizon = "left" | "right";

type Direction = Vertical } `${Vertical}${Capitalize<Horizon>}`;

템플릿 리터럴 타입을 사용하면 더욱 읽기 쉬운 코드로 작성 가능하고 코드를 재사용하고 수정하는 데 용이한 타입을 선언할 수 있다.

주의할 점
컴파일러가 유니온을 추론하는 데 시간이 오래 걸리면 비효율적이라 타입을 추론하지 않고 에러를 내뱉을 때가 있다.
따라서 템플릿 리터럴 타입에 삽입된 유니온 조합의 경우의 수가 너무 많지 않게 적절히 나눠 타입을 정의하는 게 좋다.

 

 

🎶 커스텀 유틸리티 타입 활용하기

타입스크립트에서 제공하는 유틸리티 타입만으로 표현하는 데 한계가 있을 때 커스텀 유틸리티 타입을 사용하면 된다.

 

유틸리티 함수를 활용해 styled-components의 중복 타입 선언 피하기

리액트 컴포넌트 구현 시 여러 옵션을 props로 받아 유연한 컴포넌트로 만들 수 있다.

스타일 관련 props는 styled-components에 전달되며 styled-components에도 해당 타입을 정확히 작성해야 한다.

이런 경우 Pick, Omit 같은 유틸리티 타입을 잘 활용해 코드를 간결하게 작성할 수 있다.

Pick 유틸리티 타입을 활용해 타입을 정의하면 중복된 코드를 작성하지 않아도 되고 유지보수를 더욱 편리하게 할 수 있다.

 

PickOne 유틸리티 함수

타입스크립트에는 서로 다른 2개 이상의 객체를 유니온 타입으로 받을 때 타입 검사가 제대로 진행되지 않는 이슈가 있다.

이런 문제 해결을 위해 PickOne 유틸리티 함수를 사용할 수 있다.

type Card = {
  card: string
};

type Account = {
  account: string
};

function withdraw(type: Card | Account) {
  ...
}

withdraw({ card: "tyundai", account: "hana" });

위 코드처럼 Card나 Account 중 하나만 받고 싶은 상황에서 저렇게 타입을 작성하면 의도대로 타입 검사가 이뤄지지 않는다.

withdraw 함수의 인자로 둘 중 하나만 받고 싶지만 실제로는 card, account 속성 둘 다 받아도 타입 에러가 발생하지 않는다.

이 이유는 집합 관점으로 볼 때 유니온은 합집합이 되기 때문이다.

이런 문제를 해결하기 위해 식별할 수 있는 유니온 기법을 자주 활용한다.

 

식별할 수 있는 유니온으로 객체 타입을 유니온으로 받기

식별할 수 있는 유니온은 각 타입에 type이라는 공통 속성을 추가해 구분짓는 방법이다.

type Card = {
  type: "card";
  card: string;
};
type Account = {
  type: "account";
  account: string;
};

function withdraw(type: Card | Account) {
  ...
}

withdraw({ type: "card", card: "hyundai" });
withdraw({ type: "account", account: "hana" });

위처럼 식별할 수 있는 유니온을 활용하면 공통된 속성인 type을 기준으로 객체를 구분할 수 있어 withdraw 함수를 사용하는 곳에서 정확한 타입을 추론할 수 있게 된다.

 

NonNullable 타입 검사 함수를 사용하여 간편하게 타입 가드하기

null을 가질 수 있는 값의 null 처리는 자주 사용되는 타입 가드 패턴의 하나이다.

일반적으로 if문을 사용해 null 처리 타입 가드를 적용하지만 is 키워드와 NonNullable 타입으로 타입 검사를 위한 유틸 함수를 만들어 사용할 수도 있다.

 

NonNullable 타입이란

제네릭으로 받는 T가 null이나 undefined일 때 never 또는 T를 반환하는 타입이다.

NonNullable을 사용하면 null이나 undefined가 아니 경우를 제외할 수 있다.

type NonNullable<T> = T extends null | undefined ? never : T;

 

null, undefined를 검사해주는 NonNullable 함수

NonNullable 유틸리티 타입을 사용해 null이나 undefined를 검사해 주는 타입 가드 함수를 만들어 쓸 수 있다.

NonNullable 함수는 매개변수인 value가 null이나 undefined라면 false를 반환한다.

 

 

👽 불변 객체 타입으로 활용하기

상숫값을 관리할 때 객체를 사용하는데 theme 객체, 애니메이션 객체 등 다양하게 활용된다.

이런 객체를 사용할 때 열린 타입으로 설정할 수 있다.

keof, as const로 객체 타입을 구체적을 설정하면 타입에 맞지 않는 값을 전달할 경우 타입 에러가 반환되기 때문에 컴파일 단계에서 발생할 수 있는 실수를 방지할 수 있고 자동 완성 기능을 통해 객체에 어떤 값이 있는지 쉽게 파악할 수 있다.

 

Atom 컴포넌트에서 theme style 객체 활용하기

Atom 단위의 작은 컴포넌트는 폰트 크기, 색상 등 다양한 환경에서 유연하게 사용될 수 있게 구현되어야 하는데 이런 설정값을 props로 넘겨주게 설계한다.

props로 직접 색상 값을 넘겨줄 수도 있지만 그러면 사용자가 모든 색상 값을 인지해야 하고 변경에 취약한 상태가 된다.

이런 문제 해결을 위해 여러 프로젝트에서는 스타일 값을 관리하는 theme 객체를 두고 관리한다.

Atom 컴포넌트에서는 theme 객체의 색상, 폰트 사이즈의 키값을 props로 받을 뒤 theme 객체에서 값을 받아오도록 설계한다.

 

keyof 연산자로 객체의 키값을 타입으로 추출하기

keyof 연산자는 객체 타입을 받아 해당 객체의 키값을 string 또는 number의 리터럴 유니온 타입을 반환한다.

객체 타입으로 인덱스 시그니처가 사용되었다면 keyof는 인덱스 시그니처의 키 타입을 반환한다.

interface ColorType {
  red: string;
  green: string;
  blue: string;
}

type ColorKeyType = keyof ColorType; //'red' | 'green' | 'blue'

 

typeof 연산자로 값을 타입으로 다루기

keyof 연산자는 객체 타입을 받기 때문에 객체의 키값을 타입으로 다루려면 값 객체를 타입으로 변환해야 한다.

이때 typeof 연산자를 활용할 수 있는데 변수나 속성의 타입을 추론하는 역할을 한다.

typeof 연산자는 단독으로 사용되기보다 주로 ReturnType같이 유틸리티 타입이나 keyof 연산자처럼 타입을 받는 연산자와 함께 쓰인다.

const colors = {
  red: "#F45452",
  green: "#0C952A",
  blue: "#1A7CFF",
};

type ColorsType = typeof colors;
/**
{
  red: string;
  green: string;
  blue: string;
}
*/