Template literal type dùng để làm gì trong thực tế (route, event name)? Giới hạn của nó?

Template literal type ghép các kiểu literal thành chuỗi mới ở tầng type, cho phép ràng buộc hình dạng của chuỗi chứ không chỉ tập giá trị cố định.

Ứng dụng hay gặp — tên event và handler:

type Events = 'click' | 'focus'
type Handlers = { [K in Events as `on${Capitalize<K>}`]: () => void }
// { onClick: () => void; onFocus: () => void }

Route có tham số — bóc param bằng infer:

type Params<S extends string> =
  S extends `${string}:${infer P}/${infer Rest}` ? P | Params<Rest>
  : S extends `${string}:${infer P}` ? P
  : never

type P = Params<'/users/:userId/posts/:postId'>   // 'userId' | 'postId'

Từ đó ép navigate(path, params) phải truyền đủ đúng key — đây là cơ chế nền của type-safe routing trong TanStack Router hay Next.js typed routes.

Giới hạn cần nêu:
- Bùng nổ tổ hợp: ghép hai union lớn sinh tích Descartes; TypeScript giới hạn khoảng 100.000 thành viên union và sẽ báo lỗi thay vì treo.
- Không parse được cú pháp phức tạp (regex, số học) — chỉ khớp mẫu chuỗi.
- Type đệ quy trên chuỗi dài làm chậm biên dịch; với đường dẫn rất dài nên chuyển sang khai báo union tường minh.
- Chỉ có bốn intrinsic là Uppercase, Lowercase, Capitalize, Uncapitalize.