Template literal types là gì? Ứng dụng thực tế

Cú pháp và ví dụ

type Event = "click" | "focus";
type Handler = `on${Capitalize<Event>}`;       // "onClick" | "onFocus"

type Axis = "x" | "y";
type Side = "top" | "bottom";
type Pos = `${Axis}-${Side}`;                  // 4 tổ hợp

// parse route params 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 R = Params<"/users/:id/posts/:postId">;   // "id" | "postId"

// sinh getter từ object type
type Getters<T> = {
  [K in keyof T & string as `get${Capitalize<K>}`]: () => T[K];
};

• Có các helper chuỗi dựng sẵn: Uppercase, Lowercase, Capitalize, Uncapitalize.
• infer trong template literal khớp chuỗi theo mẫu, và quy tắc là khớp ngắn nhất cho mỗi infer đứng trước một literal.
• Ứng dụng: typed event emitter, key path ("user.address.city"), kiểu cho thư viện route, CSS-in-JS, i18n key.