[TypeScript] Template Literal Types

TypeScript Template Literal Types, TS Template Literal Types, TypeScript string manipulation, Uppercase, Lowercase, Capitalize, Uncapitalize, template string types

정의

Template Literal Type 은 TypeScript 4.1 에서 도입된 문법으로, JavaScript template literal 처럼 백틱과 ${...} 를 이용해 타입 레벨 에서 문자열을 조합/조작합니다. Union 분배, 내장 문자열 utility, mapped type / conditional type 조합으로 강력한 정적 계산이 가능합니다.

기본

type World = "world";
type Greeting = `hello ${World}`;   // "hello world"

type Cardinal = "north" | "south" | "east" | "west";
type Quadrant = `${Cardinal}-${Cardinal}`;
// = "north-north" | "north-south" | ... 총 16개

Union 안에서 자동 분배 (cartesian product).

내장 문자열 utility

• Uppercase<S>
• Lowercase<S>
• Capitalize<S>: 첫 글자 대문자
• Uncapitalize<S>: 첫 글자 소문자

type A = Uppercase<"hello">;      // "HELLO"
type B = Lowercase<"HELLO">;       // "hello"
type C = Capitalize<"hello">;      // "Hello"
type D = Uncapitalize<"Hello">;    // "hello"

Event Handler 이름

type EventName<T extends string> = `on${Capitalize<T>}`;

type A = EventName<"click">;       // "onClick"
type B = EventName<"mouseover">;    // "onMouseover"

Mapped 와 조합:

type EventHandlers<E extends string> = {
  [K in E as `on${Capitalize<K>}`]: (e: Event) => void;
};

type Handlers = EventHandlers<"click" | "hover" | "submit">;
// = {onClick: (e: Event) => void; onHover: ...; onSubmit: ...}

URL / Route 타이핑

type Route = `/users/${string}` | `/posts/${number}`;

const r1: Route = "/users/kim";        // OK
const r2: Route = "/posts/42";          // OK
const r3: Route = "/comments/1";        // 오류

Path parameter 추출

type ExtractParams<S extends string> =
  S extends `${string}:${infer P}/${infer R}`
    ? P | ExtractParams<R>
    : S extends `${string}:${infer P}`
    ? P
    : never;

type A = ExtractParams<"/users/:id/posts/:postId">;
// = "id" | "postId"

type RouteParams<S extends string> = {
  [K in ExtractParams<S>]: string;
};

type P = RouteParams<"/users/:id/posts/:postId">;
// = {id: string; postId: string}

Type-safe routing 의 기반.

Case conversion

SnakeToCamel

type SnakeToCamel<S extends string> =
  S extends `${infer H}_${infer R}`
    ? `${H}${Capitalize<SnakeToCamel<R>>}`
    : S;

type A = SnakeToCamel<"user_id">;           // "userId"
type B = SnakeToCamel<"created_at_utc">;     // "createdAtUtc"

CamelToSnake

type CamelToSnake<S extends string> =
  S extends `${infer H}${infer T}`
    ? T extends Uncapitalize<T>
      ? `${Uncapitalize<H>}${CamelToSnake<T>}`
      : `${Uncapitalize<H>}_${CamelToSnake<T>}`
    : S;

type A = CamelToSnake<"userId">;     // "user_id"
type B = CamelToSnake<"getName">;     // "get_name"

KebabCase, ScreamingSnake 등

type-fest 라이브러리에 이미 정의되어 있음. 재발명하기보다는 lookup.

Numeric parsing

type ParseInt<S extends string> =
  S extends `${infer N extends number}` ? N : never;

type A = ParseInt<"42">;    // 42
type B = ParseInt<"3.14">;   // 3.14
type C = ParseInt<"foo">;    // never

TypeScript 4.8+ 에서 ${infer N extends number} 문법으로 문자열을 숫자로 파싱 가능.

String Split

type Split<S extends string, D extends string> =
  S extends `${infer H}${D}${infer R}` ? [H, ...Split<R, D>] : [S];

type A = Split<"a,b,c", ",">;    // ["a", "b", "c"]
type B = Split<"1.2.3", ".">;    // ["1", "2", "3"]

String Join

type Join<T extends string[], D extends string> =
  T extends [] ? "" :
  T extends [infer F extends string] ? F :
  T extends [infer F extends string, ...infer R extends string[]]
    ? `${F}${D}${Join<R, D>}`
    : never;

type A = Join<["a", "b", "c"], "-">;   // "a-b-c"

실전: CSS unit

type CssUnit = "px" | "em" | "rem" | "%" | "vh" | "vw";
type CssValue = `${number}${CssUnit}` | `${number}` | "auto" | "inherit";

const v1: CssValue = "10px";      // OK
const v2: CssValue = "auto";       // OK
const v3: CssValue = "10bar";      // 오류

실전: Environment variable

type EnvKey = `NEXT_PUBLIC_${string}`;

function getEnv<K extends EnvKey>(key: K): string | undefined {
  return process.env[key];
}

getEnv("NEXT_PUBLIC_API_URL");   // OK
getEnv("DATABASE_URL");           // 오류

실전: SQL 유사

type SqlWhere<T> = {
  [K in keyof T]?: T[K] | `${string}${T[K] extends string ? "LIKE" : ""}${string}`;
};

// ... 실용성 낮음, 예시 정도

Distributive with template literal

type Prefix<S extends string> = `prefix_${S}`;

type A = Prefix<"a" | "b" | "c">;   // "prefix_a" | "prefix_b" | "prefix_c"

Union 이 자동 분배되어 각 요소에 대해 template 적용.

Cartesian product

type Combinations<A extends string, B extends string> = `${A}-${B}`;

type A = Combinations<"foo" | "bar", "1" | "2">;
// = "foo-1" | "foo-2" | "bar-1" | "bar-2"

함정

관련 위키

• TypeScript - 상위 개요
• Conditional Types - Template + conditional
• Mapped Types - 키 조작
• Utility Types - Uppercase, Lowercase, …
• Generics
• Type Aliases
• Type Narrowing