숏컷 코드

type EventName = "click" | "focus";
type HandlerName = `on${Capitalize<EventName>}`;

문자열 패턴

template literal type에서 먼저 보는 기본형은 아래입니다.

• 접두사 붙이기: `on${Capitalize<Event>}`
• 접미사 붙이기: `${Lang}_title`
• 두 union 조합: `${Size}-${Variant}`
• 단순 값 집합이면 plain union 유지

1) 접두사/접미사 규칙이 있으면 template literal type

일반 템플릿 문자열처럼 보이지만, 값이 아니라 문자열 타입을 조합하는 문법입니다.

type Lang = "ko" | "en";
type MessageKey = `title_${Lang}`;

즉 문자열 규칙을 런타임이 아니라 타입에 남길 수 있습니다.

2) union과 결합하면 가능한 문자열 집합을 자동 생성한다

내부에 union이 들어오면 가능한 조합이 union으로 펼쳐집니다.

type Side = "left" | "right";
type Pos = `${Side}-panel`;

이 덕분에 문자열 상수 체계를 손으로 하나씩 나열하지 않아도 됩니다.

3) 단순 값 몇 개면 plain union이 더 읽기 쉽다

모든 문자열 집합을 template literal type으로 표현할 필요는 없습니다. 정말 패턴 규칙이 중요한 경우에만 쓰는 편이 좋습니다.

4) 내장 문자열 변환과 같이 쓰면 더 강력해진다

Capitalize, Lowercase 같은 내장 유틸리티와 결합하면 이름 규칙을 더 구조적으로 만들 수 있습니다.

type EventName = "click" | "focus";
type HandlerName = `on${Capitalize<EventName>}`;

5) 타입이 멋져지는 것보다 읽히는지가 더 중요하다

문자열 규칙을 전부 타입에 밀어 넣으면 오류 메시지와 선언 가독성이 빠르게 나빠질 수 있습니다. 이 카드의 핵심도 "가능하다"보다 "실제로 읽히는가"에 있습니다.

언제 타입 조합이 맞나

• 접두사/접미사 규칙이 있는 문자열 타입이다: template literal type
• union 조합으로 자동 생성한다: template literal + union
• 단순 값 몇 개다: plain literal union
• 문자열 변환 규칙도 필요하다: Capitalize, Lowercase 등 결합
• 타입이 너무 복잡해진다: 단순화 검토

주의할 점

// 단순히 두 값만 필요하면
// "open" | "close" 같은 plain union이 더 읽기 쉬울 수 있다.