본문 바로가기
C.W.K.
Stream
Lesson 06 of 07 · published

조건부 타입: 입력 타입에 따라 결과 타입 고르기

~12 min · generics, conditional-types, type-computation

Level 0Curious
0 XP0/93 lessons0/23 achievements
0/100 XP to next level100 XP to go0% complete
"조건부 타입은 값이 아니라 타입에 묻는 삼항 연산자야."

타입 수준의 조건

T extends X ? A : B는 T가 X에 대입 가능한지 확인해 맞으면 A, 아니면 B를 결과 타입으로 골라. 실행 중 분기가 생기는 것은 아니고 컴파일러가 타입을 계산하는 과정에서만 사용돼.

type IsString<T> = T extends string ? true : false에 문자열 타입을 넣으면 true 리터럴 타입, 숫자를 넣으면 false가 된다. 조건을 연달아 붙이면 여러 갈래의 분류도 표현할 수 있어.

기존 타입에서 새 타입을 계산해

함수라면 반환 타입을, 배열이라면 원소 타입을, Promise라면 풀린 값을 꺼내는 유틸리티가 조건부 타입 위에 세워져. 조건에서 모양을 확인하고 infer로 필요한 부분을 붙잡아 결과로 돌려주는 방식이야.

유니언에서는 분배될 수 있어

검사 대상이 가공되지 않은 제네릭 T라면 유니언의 각 항목에 조건이 따로 적용돼. 항목별 변환에는 편리하지만 전체 유니언을 한 번에 판단하고 싶을 때는 예상과 다른 결과가 나올 수 있어. [T] extends [X]처럼 감싸면 분배를 막을 수 있다.

Wrap<T>처럼 벌거벗은 타입 매개변수를 검사하면 유니언 각 멤버에 분배돼. 트랙 6에서 본 규칙과 같아. 유니언 전체를 한 번에 yes/no로 묻고 싶으면 [T] extends [X]로 감싸고, 여러 조건은 Classify<T>처럼 이어 붙여 이름 있는 유틸리티로 공개해.

입력 타입에 따라 결과 타입이 달라져야 할 때 조건부 타입을 써. 단순한 유니언으로 충분한 문제를 계산 문제로 만들지는 마.

Code

Conditional 타입 — 체크와 체인·typescript
// 기본 conditional.
type IsString<T> = T extends string ? true : false;
type A = IsString<'hi'>;       // true
type B = IsString<42>;         // false

// Multi-arm chain.
type Classify<T> =
  T extends string ? 'str' :
  T extends number ? 'num' :
  T extends boolean ? 'bool' :
  'other';

type X = Classify<'hi'>;       // 'str'
type Y = Classify<true>;       // 'bool'
type Z = Classify<unknown[]>;  // 'other'

// Standard library 스타일 — ReturnType, 단순화.
type MyReturnType<F> = F extends (...args: any[]) => infer R ? R : never;
type G = MyReturnType<() => string>;       // string
type H = MyReturnType<(x: number) => User>; // User

External links

Exercise

배열이면 원소 타입을, 배열이 아니면 입력 타입 자체를 돌려주는 ArrayElement<T>를 작성해. ArrayElement<string[]>string, ArrayElement<number>number가 되는지 조건부 타입과 infer로 확인해.
Hint
type ArrayElement<T> = T extends (infer E)[] ? E : T처럼 배열 패턴에서 E를 잡아. 배열이 아니면 거짓 분기에서 원래 T를 반환해.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.