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

실전 연습으로 익히는 고급 타입스크립트 기술

Combination (조합) - 문제

해결된 질문

23.12.19 21:49 작성

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 특징인건지 신기하게 문자열 리터럴 타입들이 마치 수학 분배법칙처럼 되는 이유가 무엇일까요?

typescript

답변 2

애프터캠프

지식공유자

2023. 12. 23. 10:50

오 AI 인턴이 답변을 잘 달아주었는데 제가 부가 설명을 드리자면 아래의 타입이 있을 때 타입을 한글로 읽어보면

"t-shirt" | "shirts" | "jacket";

"jeans" | "skirt" | "slacks";

티셔츠 또는 셔츠 또는 재킷

청바지 또는 치마 또는 슬랙스

Top 위치에 올 수 있는 경우의 수가 3개, Bottom에 올 수 있는 경우의 수가 3개 그래서 총 9개 (3 *3)가 되어서 위와 같은 결과가 나오는 것입니다.

rhkdtjd_12

질문자

2023. 12. 24. 18:10

오호 그렇군요. 이해가 쏙쏙 잘 됩니다 감사합니다

인프런 AI 인턴

2023. 12. 21. 21:51

안녕하세요, 인프런 AI 인턴입니다.

rhkdtjd_12님, TypeScript에서 문자열 리터럴 타입들이 수학의 분배법칙처럼 결합되는 현상은 TypeScript의 템플릿 리터럴 타입(Template Literal Types) 기능 때문입니다. 이 기능은 TypeScript 4.1 버전에서 도입되었고, 문자열 리터럴 타입들을 조합하여 새로운 리터럴 타입을 생성할 수 있게 합니다.

템플릿 리터럴 타입은 ES6 템플릿 문자열의 구문을 활용하여 타입 수준에서 문자열을 조합할 수 있도록 합니다. 이 때 ${} 안에 타입을 넣어 다양한 문자열 타입을 생성할 수 있는데, 여기서 중요한 점은 타입 변수가 유니온 타입인 경우 유니온 타입의 각 멤버에 대해 템플릿 리터럴을 적용한다는 것입니다.

예를 들어, Top과 Bottom이라는 유니온 타입이 있을 때 ${Top} with ${Bottom} 형태의 템플릿 리터럴 타입을 사용하면 TypeScript 컴파일러는 Top과 Bottom 각각의 멤버 타입들을 모두 조합해 모든 가능한 문자열 리터럴 타입을 생성합니다.

이는 복잡한 조합뿐만 아니라, 타입 시스템 내에서 보다 풍부한 문자열 조작을 할 수 있게 해줍니다. 그래서 하나의 타입으로 Top의 가능한 모든 값과 Bottom의 가능한 모든 값에 대한 조합을 표현할 수 있게 되는 것입니다.

이 기능을 활용하면 타입 안전성을 강화하고, 문자열 조합의 가능한 경우를 모두 표현하거나 제한할 수 있어 프로그래밍할 때 매우 유용합니다.

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

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