문제를 맞추긴 했는데, 궁금한게 있습니다.

Question

import { Equal, Expect } from "./helper"; type Top = "t-shirt" | "shirts" | "jacket"; type Bottom = "jeans" | "skirt" | "slacks"; type Outfit = `${Top} with ${Bottom}`; type tests = [ Expect< Equal< Outfit, | "t-shirt with jeans" | "t-shirt with skirt" | "t-shirt with slacks" | "shirts with jeans" | "shirts with skirt" | "shirts with slacks" | "jacket with jeans" | "jacket with skirt" | "jacket with slacks" > > ]; typescript 특징인건지 신기하게 문자열 리터럴 타입들이 마치 수학 분배법칙처럼 되는 이유가 무엇일까요?

애프터캠프 · Answer

오 AI 인턴이 답변을 잘 달아주었는데 제가 부가 설명을 드리자면 아래의 타입이 있을 때 타입을 한글로 읽어보면 "t-shirt" | "shirts" | "jacket" ; "jeans" | "skirt" | "slacks" ;   티셔츠 또는 셔츠 또는 재킷 청바지 또는 치마 또는 슬랙스 Top 위치에 올 수 있는 경우의 수가 3개, Bottom 에 올 수 있는 경우의 수가 3개 그래서 총 9개 (3 *3)가 되어서 위와 같은 결과가 나오는 것입니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. rhkdtjd_12님, TypeScript에서 문자열 리터럴 타입들이 수학의 분배법칙처럼 결합되는 현상은 TypeScript의 템플릿 리터럴 타입(Template Literal Types) 기능 때문입니다. 이 기능은 TypeScript 4.1 버전에서 도입되었고, 문자열 리터럴 타입들을 조합하여 새로운 리터럴 타입을 생성할 수 있게 합니다. 템플릿 리터럴 타입은 ES6 템플릿 문자열의 구문을 활용하여 타입 수준에서 문자열을 조합할 수 있도록 합니다. 이 때 ${} 안에 타입을 넣어 다양한 문자열 타입을 생성할 수 있는데, 여기서 중요한 점은 타입 변수가 유니온 타입인 경우 유니온 타입의 각 멤버에 대해 템플릿 리터럴을 적용한다는 것입니다. 예를 들어, Top 과 Bottom 이라는 유니온 타입이 있을 때 ${Top} with ${Bottom} 형태의 템플릿 리터럴 타입을 사용하면 TypeScript 컴파일러는 Top 과 Bottom 각각의 멤버 타입들을 모두 조합해 모든 가능한 문자열 리터럴 타입을 생성합니다. 이는 복잡한 조합뿐만 아니라, 타입 시스템 내에서 보다 풍부한 문자열 조작을 할 수 있게 해줍니다. 그래서 하나의 타입으로 Top 의 가능한 모든 값과 Bottom 의 가능한 모든 값에 대한 조합을 표현할 수 있게 되는 것입니다. 이 기능을 활용하면 타입 안전성을 강화하고, 문자열 조합의 가능한 경우를 모두 표현하거나 제한할 수 있어 프로그래밍할 때 매우 유용합니다.