템플릿 리터럴 타입: 문자열 규칙을 타입으로 표현하기

"문자열 이름에 규칙이 있다면, 그 규칙 자체를 타입으로 만들 수 있어."

문자열 조합을 컴파일러에게 맡기기

템플릿 리터럴 타입은 값의 템플릿 문자열과 닮은 문법으로 문자열 리터럴 타입을 조합해. type Size = `${number}px`는 숫자 뒤에 px가 붙는 문자열을 나타내. type Axis = 'x' | 'y'를 넣어 이벤트 이름을 만들면 'onXChange' | 'onYChange'처럼 펼쳐져.

삽입 위치에 합집합이 여러 개 있으면 가능한 조합이 곱으로 펼쳐져. `${'a' | 'b'}-${1 | 2}`는 네 문자열 리터럴의 합집합이야. 작은 이름 체계에는 편리하지만 조합 수가 커지면 컴파일러와 사람 모두 부담을 느끼므로 범위를 제한해야 해.

대소문자 도구와 키 재매핑

TypeScript는 Uppercase<S>, Lowercase<S>, Capitalize<S>, Uncapitalize<S>를 제공해. 매핑된 타입의 as와 결합하면 데이터 프로퍼티에서 메서드 이름을 파생할 수 있어. 예컨대 name과 age에서 getName과 getAge를 만드는 식이지.

이 패턴의 장점은 관례를 문서에만 써 두지 않고 컴파일러가 검사하게 한다는 거야. 원본 키가 추가되면 대응하는 핸들러나 getter가 빠졌다는 사실도 드러난다. 반대로 외부 API 이름이 불규칙하다면 억지로 템플릿 규칙에 끼워 맞추지 말고 명시적 매핑을 쓰는 편이 정직해.

파생 API 이름에서 빛나

데이터 모양에서 메서드 이름을 만드는 라이브러리 API가 대표 용도야. React의 useState 관례처럼 useUser라는 훅에서 setUser라는 setter 이름을 파생하는 규칙을 템플릿 리터럴 타입으로 표현하고 검사할 수 있어.

템플릿 리터럴 타입은 실제로 존재하는 명명 규칙을 코드 계약으로 올릴 때 빛나. 이름을 발명하기 위한 장식이 아니라, 이미 반복되는 관계를 자동으로 보존하는 데 써.

Code

Template literal 타입 — concat, 분배, case-transform·typescript

// 기본 template literal 타입.
type Greeting = `Hello, ${string}`;
const g1: Greeting = 'Hello, Pippa';   // ✅
const g2: Greeting = 'Hi there';        // ❌ 'Hello, ' 로 시작 안 함

// Union 분배.
type CSSValue = `${number}px` | `${number}rem` | `${number}%`;
const v: CSSValue = '12px';            // ✅
const v2: CSSValue = '1.5rem';         // ✅

// Cartesian product.
type Suit = 'hearts' | 'spades' | 'diamonds' | 'clubs';
type Rank = 'A' | 'K' | 'Q' | 'J';
type Card = `${Rank}-of-${Suit}`;       // 총 16 literal 타입

// Built-in case utility.
type A = Uppercase<'hello'>;            // 'HELLO'
type B = Capitalize<'name'>;            // 'Name'

// Event 이름에서 event handler 이름.
type EventName = 'click' | 'hover' | 'focus';
type Handler = `on${Capitalize<EventName>}`;
// 'onClick' | 'onHover' | 'onFocus'

Exercise

'GET' | 'POST' | 'PUT' | 'DELETE'에서 handleGet 같은 핸들러 이름 유니언을 만들어. 이어서 메서드와 'USER' | 'POST'를 조합한 Action 타입을 만들어 가능한 모든 문자열 조합이 생성되는지 확인해.

Hint

메서드 이름을 소문자로 만든 뒤 첫 글자를 대문자로 바꿔 handle... 앞부분과 합쳐. 합집합을 넣으면 각 메서드에 대한 이름이 자동으로 펼쳐져.

문자열 조합을 컴파일러에게 맡기기

대소문자 도구와 키 재매핑

파생 API 이름에서 빛나

Code

External links

Exercise

Progress

댓글 0