타입스크립트 템플릿 리터럴 타입

type Category = '한식' | '중식' | '일식' | '기타';

function printCategory(category: Category) {
  // '한식', '중식', '일식', '기타' 중 하나
}

printCategory('한식'); // OK
printCategory('한...식'); // ERROR

type HttpMethods = 'GET' | 'OPTION' | 'HEAD';

type HttpUrlPaths = '/animals' | '/fruits';

type HttpEndpoints = `${HttpMethods} ${HttpUrlPaths}`;
// 'GET /animals' | 'OPTION /animals' | 'HEAD /animals' | 'GET /fruits' | 'OPTION /fruits' | 'HEAD /fruits'

type Events = 'click' | 'hover' | 'keyup' | 'keydown';

type EventHandlers = `on${Events}`;
// 'onclick' | 'onhover' | 'onkeyup' | 'onkeydown';

type HttpEndpoints =
  | `GET /animals/popular`
  | `GET /animals/${number}`
  | `GET /animals/search/${string}`;

function $<T extends `${string}?` | `${string}`>(
  selector: T
): typeof selector extends `${string}` ? Element | null : Element {
  const $element = document.querySelector(selector.endsWith('?') ? selector.slice(0, -1) : selector);
  if ($element === null) {
    throw new Error('Element not found!');
  }
  return $element;
}

const $ul = $('ul'); // Element
const $nullableUl = $('ul?'); // Element | null

type HttpEndpoints =
  | `GET /animals/popular`
  | `GET /animals/${number}`
  | `GET /animals/search/${string}`
  | `POST /animals`
  | `POST /animals/${number}`
  | `PUT /animals/${number}`;

type GetHttpMethods<T> = T extends `${infer U} ${string}` ? U : never;

type HttpMethods = GetHttpMethods<HttpEndpoints>;
// 'GET' | 'POST' | 'PUT'