Template Literal Types — 문자열 패턴으로 타입 만들기

// 문자열 리터럴을 조합해서 새 타입 생성
type Greeting = `hello ${string}`;

const a: Greeting = 'hello world';   // OK
const b: Greeting = 'hello TypeScript'; // OK
// const c: Greeting = 'hi world';    // ❌ Error

// 유니온과 조합하면 모든 경우의 수가 생성됨
type Color = 'red' | 'blue' | 'green';
type Size = 'small' | 'large';

type ColorSize = `${Color}-${Size}`;
// 'red-small' | 'red-large' | 'blue-small' | 'blue-large' | 'green-small' | 'green-large'

type Upper = Uppercase<'hello'>;      // 'HELLO'
type Lower = Lowercase<'HELLO'>;      // 'hello'
type Cap = Capitalize<'hello'>;       // 'Hello'
type Uncap = Uncapitalize<'Hello'>;   // 'hello'

// 유니온에도 분배됨
type Events = 'click' | 'scroll' | 'keypress';
type OnEvents = `on${Capitalize<Events>}`;
// 'onClick' | 'onScroll' | 'onKeypress'

type CSSUnit = 'px' | 'em' | 'rem' | '%' | 'vh' | 'vw';
type CSSValue = `${number}${CSSUnit}`;

const width: CSSValue = '100px';    // OK
const height: CSSValue = '50vh';    // OK
// const wrong: CSSValue = '100';    // ❌ Error — 단위 없음
// const wrong2: CSSValue = 'auto';  // ❌ Error — 패턴 불일치

type EventName = 'click' | 'focus' | 'blur' | 'change';

// on + 대문자 시작 이벤트 이름
type EventHandler = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur' | 'onChange'

// 핸들러 맵 생성
type EventHandlerMap = {
  [K in EventName as `on${Capitalize<K>}`]: (event: Event) => void;
};
// {
//   onClick: (event: Event) => void;
//   onFocus: (event: Event) => void;
//   onBlur: (event: Event) => void;
//   onChange: (event: Event) => void;
// }

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type Endpoint = '/users' | '/posts' | '/comments';

type ApiRoute = `${HttpMethod} ${Endpoint}`;
// 'GET /users' | 'GET /posts' | 'GET /comments' |
// 'POST /users' | 'POST /posts' | 'POST /comments' | ...

// 점 표기법에서 첫 번째 키 추출
type FirstKey<S extends string> = S extends `${infer K}.${string}` ? K : S;

type A = FirstKey<'user.name.first'>; // 'user'
type B = FirstKey<'name'>;             // 'name'

// 점 표기법에서 나머지 추출
type RestKeys<S extends string> = S extends `${string}.${infer R}` ? R : never;

type C = RestKeys<'user.name.first'>; // 'name.first'

// 점 표기법으로 깊은 속성 타입을 추출
type DeepGet<T, Path extends string> =
  Path extends `${infer K}.${infer Rest}`
    ? K extends keyof T
      ? DeepGet<T[K], Rest>
      : never
    : Path extends keyof T
      ? T[Path]
      : never;

interface Config {
  db: {
    host: string;
    port: number;
  };
  app: {
    name: string;
  };
}

type DbHost = DeepGet<Config, 'db.host'>; // string
type AppName = DeepGet<Config, 'app.name'>; // string

type CamelToKebab<S extends string> =
  S extends `${infer C}${infer Rest}`
    ? C extends Uppercase<C>
      ? `-${Lowercase<C>}${CamelToKebab<Rest>}`
      : `${C}${CamelToKebab<Rest>}`
    : S;

type A = CamelToKebab<'backgroundColor'>; // 'background-color'
type B = CamelToKebab<'fontSize'>;         // 'font-size'

// 첫 번째 매칭만 교체
type Replace<
  S extends string,
  From extends string,
  To extends string
> = From extends ''
  ? S
  : S extends `${infer Before}${From}${infer After}`
    ? `${Before}${To}${After}`
    : S;

type A = Replace<'hello world', 'world', 'TS'>; // 'hello TS'

// 모든 매칭 교체
type ReplaceAll<
  S extends string,
  From extends string,
  To extends string
> = From extends ''
  ? S
  : S extends `${infer Before}${From}${infer After}`
    ? ReplaceAll<`${Before}${To}${After}`, From, To>
    : S;