템플릿 리터럴 타입

선요약

템플릿 리터럴 타입은 문자열 패턴을 조합해 새로운 문자열 리터럴 유니온 타입을 만드는 타입스크립트의 타입 조작 기능임. 여러 문자열 유니온 타입을 조합할 때 반복적인 수작업 없이 효율적으로 조합 가능함.

---

템플릿 리터럴 타입이란?

템플릿 리터럴 타입은 타입 조작 기능 중 가장 단순한 기능으로, 템플릿 리터럴 문법을 이용해 특정 패턴을 갖는 문자열 타입을 만드는 기능임.

type Color = "red" | "black" | "green";
type Animal = "dog" | "cat" | "chicken";

위와 같은 코드에서 아래와 같이 모든 조합의 문자열 리터럴 타입을 만들고 싶다고 가정함:

type ColoredAnimal =
  | "red-dog"
  | "red-cat"
  | "red-chicken"
  | "black-dog"
  | "black-cat"
  | "black-chicken"
  | "green-dog"
  | "green-cat"
  | "green-chicken";

위처럼 수작업으로 만들면 타입이 늘어날수록 불편하고 오류 가능성도 커짐. 이럴 때 템플릿 리터럴 타입을 쓰면 다음처럼 간단하게 표현 가능함:

type ColoredAnimal = `${Color}-${Animal}`;

• Color의 모든 값과 Animal의 모든 값을 문자열로 조합한 유니온 타입이 자동으로 생성됨
• ${} 안에는 타입 변수 또는 타입 이름을 넣을 수 있음

---

예시 응용

특정 접두어 붙이기

type Prefix = "pre";
type Word = "load" | "view";

type PrefixedWord = `${Prefix}_${Word}`;
// "pre_load" | "pre_view"

이벤트 핸들러 이름 만들기

type Event = "click" | "hover";
type HandlerName = `on${Capitalize<Event>}`;
// "onClick" | "onHover"

• Capitalize<T>: 첫 글자를 대문자로 바꿔줌
• Uncapitalize<T>: 첫 글자를 소문자로 바꿔줌
• Uppercase<T>, Lowercase<T>: 대문자화, 소문자화

---

주의사항

• 템플릿 리터럴 타입은 컴파일 타임에 조합됨 → 런타임에는 영향을 주지 않음
• ${} 내부에 값(value)을 넣는 것이 아니라 타입을 넣는 것임
• 리터럴 유니온 타입이 너무 많아지면 타입 추론이 느려질 수 있음

---

마지막 요약

템플릿 리터럴 타입은 문자열 리터럴 조합을 자동화하여, 복잡한 유니온 타입을 간결하고 안전하게 생성할 수 있게 해주는 타입스크립트의 문법임. 반복적인 문자열 타입 정의를 줄이고, 패턴 기반의 타입 생성이 필요한 상황에서 특히 유용함.