강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

홍영범님의 프로필 이미지
홍영범

작성한 질문수

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

분산적인 조건부 타입

유니온 타입의 분산적 조건부 타입

작성

·

14

0

안녕하세요! 강사님 이번에 처음으로 타입스크립트 강의를 들으면서 사용 방법만 알던 상황에서 타입스크립트를 더 잘 이해할 수 있었습니다. 감사합니다!

 

이번에 유니온 타입의 분산적 조건부 타입을 공부하면서 든 궁금증인데 유니온 타입이 들어오면 분산적으로 조건부 타입이 적용하도록 설계된 이유가 있을까요?

string | boolean | number extends number ? boolean : number 이런식으로 조건을 줬을 때 직관적으로는 유니온 전체를 하나의 타입으로 보고 조건식을 판단해야 할 것 같은데 분리해서 판단한다면 뭔가 이유가 있을 것 같아 질문드립니다!

답변 2

1

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 홍영범님 이정환입니다.

우선 설계 의도 자체는 설계자만이 정확하게 알겠지만 개인적으로 추론해보자면 마치 자바스크립트의 조건문과 같은 이유에서이지 않을까요?

분산적인 조건부 타입을 사용하면 A | B | C처럼 여러 타입으로 이루어진 유니온 타입 전체에 조건을 적용하는 것이 아니라, 각 타입(A, B, C)에 조건을 각각 적용한 뒤, 그 결과를 다시 유니온으로 묶는 방식으로 처리할 수 있습니다.

예를 들어 유니온 타입으로 부터, 딱 문자열 타입만 추출하는 다음과 같은 연산을 수행할 수 있습니다.

type OnlyStrings<T> = T extends string ? T : never;

type A = OnlyStrings<"a" | 1 | true>; // 결과는 "a"

또는 아래와 같이 API 응답 타입에서 성공적인 응답의 타입만 뽑아내는 경우에도 활용될 수 있습니다.

type ApiResponse =
  | { type: "success"; data: string }
  | { type: "error"; errorCode: number }
  | { type: "loading" };

type ExtractSuccess<T> = T extends { type: "success" } ? T : never;

type OnlySuccess = ExtractSuccess<ApiResponse>;

 

 

홍영범님의 프로필 이미지
홍영범
질문자

예시 들어주신 것을 보니 조건문처럼 유연하게 타입을 사용할 수 있다는 장점이 있는 것 같습니다!

답변 감사합니다!

0

안녕하세요, 인프런 AI 인턴입니다. 홍영범님.

TypeScript에서 분산적 조건부 타입 (Distributive Conditional Types)은 유니온 타입을 각 멤버에 대해 조건을 각각 적용한 다음, 결과를 다시 유니온으로 합치는 기능을 갖고 있습니다. 이는 타입스크립트의 타입 시스템이 매우 유연하고 정밀하게 동작하도록 만들어주는 중요한 기능 중 하나입니다.

유니온 타입의 분산적 조건부 타입 이유:

  1. 개별 타입 처리의 필요성: 각 타입 멤버를 개별적으로 확인함으로써 더 세부적인 타입 추론과 검증이 가능합니다. 이로써 타입스크립트는 각 타입의 특성에 맞춰 구체적인 타입을 제공할 수 있게 됩니다.

  2. 유연한 타입 시스템: TypeScript는 자바스크립트의 런타임 특성을 수용하면서도 타입 안전성을 제공해야 합니다. 이를 위해서는 유니온 타입에 대해 분산적으로 조건을 적용하여 모든 가능한 경우의 수에 대해 다룰 수 있어야 합니다.

예를 들어, type Example = string | boolean | number; 에 대해 조건부 타입을 적용하면, 각각의 타입(즉, string, boolean, number)에 대해 개별적으로 조건을 체크한 후, 그 결과를 다시 하나의 유니온 타입으로 합칩니다.

이러한 분산적 처리 덕분에 TypeScript에서는 복잡한 타입 연산이 가능하고, 다양한 케이스를 포괄할 수 있는 유연한 타입 정의가 가능합니다.

관련 질문을 통해 더 깊이 이해하시길 원하신다면, 아래 링크를 참고하세요:
- TS 질문 ) 분산적인 조건부 타입
- 분산적인 조건부 타입 섹션 질문

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

홍영범님의 프로필 이미지
홍영범

작성한 질문수

질문하기