Template literal type là gì?

Question

Accepted Answer

**Template literal type** cho phép bạn xây dựng các string literal type mới bằng cách nội suy (interpolate) các type khác vào một template — thao tác chuỗi ở *cấp độ type*. ```ts type Greeting = `Hello, ${string}`; const a: Greeting = "Hello, world"; // ✅ const b: Greeting = "Hi there"; // ❌ không khớp với pattern ``` ## Kết hợp với union — chúng phân phối (distribute) ```ts type Color = "red" | "blue"; type Shade = "light" | "dark"; type Variant = `${Shade}-${Color}`; // "light-red" | "light-blue" | "dark-red" | "dark-blue" — tất cả các tổ hợp ``` Compiler mở rộng mọi tổ hợp của các union — hữu ích để tự động sinh các string key hợp lệ (CSS class, tên sự kiện, pattern route). ## Một pattern thực tế: tên sự kiện có type ```ts type Entity = "user" | "post"; type Event = `${Entity}:${"created" | "deleted"}`; // "user:created" | "user:deleted" | "post:created" | "post:deleted" function on(event: Event, cb: () => void) {} on("user:created", () => {}); // ✅ on("user:updated", () => {}); // ❌ không phải là một sự kiện hợp lệ ``` ## Với key remapping và các helper nội tại (intrinsic) ```ts type Getters = { [K in keyof T & string as `get${Capitalize}`]: () => T[K]; }; // { name: string } → { getName: () => string } ``` `Uppercase`, `Lowercase`, `Capitalize`, `Uncapitalize` là các helper nội tại tích hợp sẵn. ## Tại sao điều này quan trọng Template literal type làm cho các API dựa trên chuỗi trở nên type-safe: route param, hệ thống sự kiện, CSS-in-JS, tên cột của ORM. Thay vì chấp nhận một `string` bất kỳ, bạn có thể giới hạn vào một tập các chuỗi hợp lệ chính xác, được sinh ra — bắt lỗi gõ nhầm lúc biên dịch ở những nơi từng chỉ được "đánh kiểu bằng chuỗi" (stringly-typed).