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;
};