Template literal types คืออะไร?

Question

Accepted Answer

**Template literal types** ช่วยให้คุณสร้าง string literal types ใหม่โดยการใส่ types อื่นๆ ลงในแม่แบบ — การจัดการ string ในระดับ *type* ```ts type Greeting = `Hello, ${string}`; const a: Greeting = "Hello, world"; // ✅ const b: Greeting = "Hi there"; // ❌ doesn't match the pattern ``` ## รวมกับ unions — พวกมันกระจาย ```ts type Color = "red" | "blue"; type Shade = "light" | "dark"; type Variant = `${Shade}-${Color}`; // "light-red" | "light-blue" | "dark-red" | "dark-blue" — all combinations ``` คอมไพเลอร์ขยายทุกการผสมผสานของ unions — มีประโยชน์สำหรับการสร้าง valid string keys (CSS classes, event names, route patterns) โดยอัตโนมัติ ## รูปแบบจริง: ชื่อเหตุการณ์ที่มีประเภท ```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", () => {}); // ❌ not a valid event ``` ## ด้วย key remapping และ intrinsic helpers ```ts type Getters = { [K in keyof T & string as `get${Capitalize}`]: () => T[K]; }; // { name: string } → { getName: () => string } ``` `Uppercase`, `Lowercase`, `Capitalize`, `Uncapitalize` เป็น intrinsic helpers ที่สร้างมาให้ ## ทำไมถึงมีความสำคัญ Template literal types ทำให้ string-based APIs ปลอดภัย: route params, event systems, CSS-in-JS, ORM column names แทนที่จะยอมรับ `string` ใดๆ คุณสามารถจำกัดให้เป็นชุด string ที่ถูกต้องที่สร้างขึ้นอย่างแม่นยำ — จับ typos ที่เวลา compile ในที่ที่เคยเป็น stringly-typed