템플릿 리터럴 타입
문자열 리터럴 타입과 템플릿 리터럴 구문을 결합해 이벤트 이름, CSS 속성 문자열, API 경로와 같은 타입을 도출합니다.
템플릿 리터럴 타입은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
템플릿 리터럴 타입이란 무엇인가요
TypeScript는 타입 수준에서 템플릿 리터럴을 사용해 문자열 타입을 만들 수 있습니다. 유니언 타입과 결합하면 각각을 나열하지 않고도 유효한 문자열 수천 개를 표현할 수 있습니다.
기본 템플릿 리터럴 타입
타입 위치에서 백틱으로 감싼 문자열을 사용하세요. 다른 타입을 보간으로 받을 수 있습니다.
type Greeting = `Hello, ${string}!`;
const a: Greeting = 'Hello, Alice!'; // OK
const b: Greeting = 'Hi, Alice!'; // Error유니언 결합하기
유니언을 보간하면 TypeScript는 가능한 모든 조합의 곱집합을 만듭니다.
type Direction = 'top' | 'right' | 'bottom' | 'left';
type Property = 'margin' | 'padding';
type Side = `${Property}-${Direction}`;
// 'margin-top' | 'margin-right' | ... | 'padding-left' (8 strings)이벤트 이름 추론
이벤트 이름에서 이벤트 처리기 이름을 파생하는 것은 실제 개발에서 자주 사용하는 방법입니다.
type EventName = 'click' | 'focus' | 'blur' | 'change';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur' | 'onChange'
type Handlers = { [K in HandlerName]?: (e: Event) => void };
// { onClick?: ...; onFocus?: ...; onBlur?: ...; onChange?: ... }문자열 조작 유틸리티 타입
TypeScript는 다음과 같은 기본 제공 도우미를 제공합니다. Uppercase<T>, Lowercase<T>, Capitalize<T>, Uncapitalize<T>.
type Hi = Capitalize<'hello'>; // 'Hello'
type Yell = Uppercase<'hello'>; // 'HELLO'
type Quiet = Lowercase<'HELLO'>; // 'hello'
type Lower = Uncapitalize<'Hi'>; // 'hi'CSS 속성 타입
픽셀 값, 16진수 색상, 백분율처럼 CSS와 유사한 문자열 타입을 표현할 수 있습니다.
type Px = `${number}px`;
type Hex = `#${string}`;
type Pct = `${number}%`;
type Style = { padding: Px; color: Hex; width: Pct };
const s: Style = { padding: '8px', color: '#fff', width: '50%' }; // OK
const bad: Style = { padding: '8', color: 'white', width: '50' }; // Error템플릿 리터럴을 사용한 추론
infer 키워드는 문자열 타입의 일부를 추출할 수 있어 파서와 라우트 타입에 유용합니다.
type ExtractName<T> = T extends `Hello, ${infer Name}!` ? Name : never;
type Result = ExtractName<'Hello, Alice!'>; // 'Alice'API 라우트 타입
타입 안전한 API 라우트를 만들고, 문자열 패턴에서 경로 매개변수를 추출할 수 있습니다.
type PathParams<T extends string> =
T extends `${string}/:${infer Param}/${infer Rest}`
? { [K in Param | keyof PathParams<`/${Rest}`>]: string }
: T extends `${string}/:${infer Param}`
? { [K in Param]: string }
: {};
type P = PathParams<'/users/:userId/posts/:postId'>;
// { userId: string; postId: string }Tailwind 클래스 제안 타입
문자열 속성을 알려진 디자인 시스템 값으로 제한할 수 있습니다.
type Spacing = 0 | 1 | 2 | 4 | 8 | 16;
type Side = 't' | 'r' | 'b' | 'l';
type TwSpacing = `m${Side}-${Spacing}` | `p${Side}-${Spacing}`;
// 'mt-0' | 'mt-1' | ... | 'pl-16'
function Box(props: { className: TwSpacing }) { /* ... */ }제한과 컴파일러 성능
템플릿 리터럴의 곱집합은 급격히 커질 수 있습니다(50 × 50 유니언은 문자열 2500개를 생성합니다). TypeScript는 컴파일할 수 있지만 추론이 느려집니다. 가능한 값의 집합을 작게 유지하세요.
문자열 리터럴 타입 구분하기
템플릿 리터럴은 더 표현력이 높은 브랜딩 방식으로 사용할 수 있습니다. 문자열이기는 하지만 허용되는 값이 제한됩니다.
빠른 확인
type X = `on${Capitalize<'click' | 'focus'>}`는 어떤 값으로 평가되나요?
복습: 템플릿 리터럴 타입
보간된 유니언과 템플릿 리터럴을 사용해 문자열 타입을 만드세요. 곱집합은 빠르게 커지므로 가능한 값의 집합을 작게 유지하세요. 첫 글자 대문자화, 전체 대문자화, 전체 소문자화, 첫 글자 소문자화를 활용하세요. infer와 결합해 문자열의 일부를 추출할 수 있습니다. 이벤트 이름, CSS 값, 라우트 매개변수, 디자인 시스템 클래스 이름에 유용합니다.
자주 묻는 질문
“템플릿 리터럴 타입” 강의는 무료인가요?
네 — “템플릿 리터럴 타입” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“템플릿 리터럴 타입”에서 뭘 배우나요?
문자열 리터럴 타입과 템플릿 리터럴 구문을 결합해 이벤트 이름, CSS 속성 문자열, API 경로와 같은 타입을 도출합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“템플릿 리터럴 타입” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.