템플릿 리터럴 타입 (Template Literal Types)

자바스크립트의 템플릿 리터럴(백틱) 구문을 타입 시스템에 그대로 가져온 기능입니다. 문자열의 패턴 자체를 타입으로 강력하게 통제할 수 있습니다.

🧬 DNA 합성 (Template Literal Types)

두 개 이상의 문자열 유니온 타입을 템플릿 리터럴로 묶으면
모든 경우의 수가 자동으로 조합(Multiply)되어 생성됩니다.

type VerticalAlignment = "top" | "middle" | "bottom";
type HorizontalAlignment = "left" | "center" | "right";

// 두 문자열 조합을 자동으로 결합합니다! (총 3 x 3 = 9가지)
type Alignment = `${VerticalAlignment}-${HorizontalAlignment}`;

// 정상적인 자동완성과 타입 체킹
const position1: Alignment = "top-left";
const position2: Alignment = "bottom-center";

// const errorPosition: Alignment = "top-middle"; // ❌ 오류: 조합에 없음

// Getter/Setter 이름 동적 생성
type State = {
  name: string;
  age: number;
};

// State의 키들을 기반으로 onNameChange, onAgeChange 이벤트 타입을 만들어냅니다.
type StateEvents = {
  [K in keyof State as `on${Capitalize<string & K>}Change`]: (value: State[K]) => void;
};