7장: 템플릿 리터럴 타입으로 문자열 다루기

type Greeting = `Hello, ${string}`;
 
const a: Greeting = "Hello, World";   // OK
const b: Greeting = "Hello, TypeScript"; // OK
const c: Greeting = "Hi, World";       // Error: 'Hi, World'는 'Hello, ${string}'에 할당 불가

type Color = "red" | "green" | "blue";
type Size = "sm" | "md" | "lg";
 
type ColorSize = `${Color}-${Size}`;
// "red-sm" | "red-md" | "red-lg" |
// "green-sm" | "green-md" | "green-lg" |
// "blue-sm" | "blue-md" | "blue-lg"
 
// CSS 클래스 이름 생성
type Spacing = 0 | 1 | 2 | 4 | 8;
type Direction = "t" | "r" | "b" | "l" | "x" | "y";
type SpacingClass = `p${Direction}-${Spacing}` | `m${Direction}-${Spacing}`;
// "pt-0" | "pt-1" | ... | "ml-8" — 총 60개 조합

type A = Uppercase<"hello">;     // "HELLO"
type B = Lowercase<"HELLO">;     // "hello"
type C = Capitalize<"hello">;    // "Hello"
type D = Uncapitalize<"Hello">;  // "hello"
 
// 유니온에도 분배 적용
type Words = "hello" | "world" | "typescript";
type Upper = Uppercase<Words>;   // "HELLO" | "WORLD" | "TYPESCRIPT"

// 첫 글자 추출
type FirstChar<S extends string> =
  S extends `${infer C}${infer _}` ? C : never;
 
type FC = FirstChar<"hello">;  // "h"
 
// 마지막 글자 추출
type LastChar<S extends string> =
  S extends `${infer _}${infer Rest}`
    ? Rest extends "" ? _ : LastChar<Rest>
    : never;
 
type LC = LastChar<"hello">;  // "o"
 
// 구분자로 분할
type Split<S extends string, D extends string> =
  S extends `${infer Head}${D}${infer Tail}`
    ? [Head, ...Split<Tail, D>]
    : [S];
 
type Parts = Split<"a.b.c.d", ".">;  // ["a", "b", "c", "d"]

// camelCase → kebab-case
type CamelToKebab<S extends string> =
  S extends `${infer C}${infer Rest}`
    ? C extends Uppercase<C>
      ? `-${Lowercase<C>}${CamelToKebab<Rest>}`
      : `${C}${CamelToKebab<Rest>}`
    : S;
 
type Kebab = CamelToKebab<"backgroundColor">;  // "background-color"
type Kebab2 = CamelToKebab<"fontSize">;         // "font-size"
 
// kebab-case → camelCase
type KebabToCamel<S extends string> =
  S extends `${infer Head}-${infer Tail}`
    ? `${Head}${KebabToCamel<Capitalize<Tail>>}`
    : S;
 
type Camel = KebabToCamel<"background-color">;  // "backgroundColor"
type Camel2 = KebabToCamel<"font-size">;         // "fontSize"

type Replace<
  S extends string,
  From extends string,
  To extends string
> = S extends `${infer Before}${From}${infer After}`
  ? `${Before}${To}${After}`
  : S;
 
type ReplaceAll<
  S extends string,
  From extends string,
  To extends string
> = S extends `${infer Before}${From}${infer After}`
  ? ReplaceAll<`${Before}${To}${After}`, From, To>
  : S;
 
type R1 = Replace<"hello world", " ", "-">;      // "hello-world"
type R2 = ReplaceAll<"a.b.c.d", ".", "/">;        // "a/b/c/d"

type CSSProperty =
  | "margin" | "padding" | "border"
  | "font" | "background" | "color";
 
type CSSDirection = "top" | "right" | "bottom" | "left";
 
type CSSCompound = CSSProperty | `${CSSProperty}-${CSSDirection}`;
 
function setStyle(element: HTMLElement, property: CSSCompound, value: string) {
  // ...
}
 
setStyle(document.body, "margin-top", "10px");    // OK
setStyle(document.body, "padding-left", "20px");  // OK
setStyle(document.body, "margin-center", "10px"); // Error

type ExtractParams<Path extends string> =
  Path extends `${string}:${infer Param}/${infer Rest}`
    ? { [K in Param | keyof ExtractParams<Rest>]: string }
    : Path extends `${string}:${infer Param}`
      ? { [K in Param]: string }
      : {};
 
type Params1 = ExtractParams<"/users/:id">;
// { id: string }
 
type Params2 = ExtractParams<"/users/:userId/posts/:postId">;
// { userId: string; postId: string }
 
function createRoute<const Path extends string>(
  path: Path,
  handler: (params: ExtractParams<Path>) => void
) {
  // 라우트 등록 로직...
}
 
createRoute("/users/:id", (params) => {
  console.log(params.id);       // OK — 자동완성 지원
  console.log(params.name);     // Error — 'name'은 존재하지 않음
});

type ExtractColumns<SQL extends string> =
  SQL extends `SELECT ${infer Columns} FROM ${string}`
    ? Split<Trim<Columns>, ",">
    : never;
 
type Trim<S extends string> =
  S extends ` ${infer Rest}` ? Trim<Rest> :
  S extends `${infer Rest} ` ? Trim<Rest> :
  S;
 
type TrimAll<T extends string[]> = {
  [K in keyof T]: Trim<T[K] & string>;
};
 
// 실제 활용에서는 더 정교한 파싱이 필요하지만,
// 기본 개념을 보여주는 예시입니다
type Columns = ExtractColumns<"SELECT id, name, email FROM users">;
// ["id", " name", " email"] — Trim 적용 필요

type Paths<T, Prefix extends string = ""> = T extends object
  ? {
      [K in keyof T & string]: T[K] extends object
        ? `${Prefix}${K}` | Paths<T[K], `${Prefix}${K}.`>
        : `${Prefix}${K}`;
    }[keyof T & string]
  : never;
 
interface Config {
  server: {
    port: number;
    host: string;
  };
  database: {
    url: string;
    pool: {
      min: number;
      max: number;
    };
  };
}
 
type ConfigPaths = Paths<Config>;
// "server" | "server.port" | "server.host" |
// "database" | "database.url" | "database.pool" |
// "database.pool.min" | "database.pool.max"
 
function getConfig<P extends ConfigPaths>(path: P): PathValue<Config, P> {
  // 구현...
}
 
const port = getConfig("server.port");      // number
const dbUrl = getConfig("database.url");    // string

type DOMEventMap = {
  click: MouseEvent;
  dblclick: MouseEvent;
  keydown: KeyboardEvent;
  keyup: KeyboardEvent;
  focus: FocusEvent;
  blur: FocusEvent;
};
 
type PrefixedEvents<
  T extends Record<string, any>,
  Prefix extends string
> = {
  [K in keyof T as `${Prefix}${Capitalize<string & K>}`]: T[K];
};
 
type OnEvents = PrefixedEvents<DOMEventMap, "on">;
// {
//   onClick: MouseEvent;
//   onDblclick: MouseEvent;
//   onKeydown: KeyboardEvent;
//   onKeyup: KeyboardEvent;
//   onFocus: FocusEvent;
//   onBlur: FocusEvent;
// }
 
// React 스타일 이벤트 핸들러 타입 생성
type EventHandlerProps<T extends Record<string, any>> = {
  [K in keyof T as `on${Capitalize<string & K>}`]?: (event: T[K]) => void;
};
 
type DOMEventHandlers = EventHandlerProps<DOMEventMap>;
// {
//   onClick?: (event: MouseEvent) => void;
//   onDblclick?: (event: MouseEvent) => void;
//   ...
// }

interface State {
  count: number;
  name: string;
  items: string[];
}
 
// State에서 자동으로 getter, setter, action 타입 생성
type StoreGetters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
 
type StoreSetters<T> = {
  [K in keyof T as `set${Capitalize<string & K>}`]: (value: T[K]) => void;
};
 
type StoreSubscriptions<T> = {
  [K in keyof T as `on${Capitalize<string & K>}Change`]: (
    callback: (newValue: T[K], oldValue: T[K]) => void
  ) => () => void;
};
 
type Store<T> = StoreGetters<T> & StoreSetters<T> & StoreSubscriptions<T>;
 
type AppStore = Store<State>;
// {
//   getCount: () => number;
//   getName: () => string;
//   getItems: () => string[];
//   setCount: (value: number) => void;
//   setName: (value: string) => void;
//   setItems: (value: string[]) => void;
//   onCountChange: (callback: ...) => () => void;
//   onNameChange: (callback: ...) => () => void;
//   onItemsChange: (callback: ...) => () => void;
// }