模板字面量类型(TS 4.1)把字符串操作搬到类型层:${A}${B} 拼接时联合会做笛卡尔展开,配合内置的 Uppercase、Lowercase、Capitalize、Uncapitalize 可批量生成字符串类型族。典型应用:事件名约束(on${'Click'|'Hover'} 得到 'onClick' | 'onHover')、CSS 单位(${number}px)、路由参数解析、i18n key 校验。
与 infer 结合能做类型级字符串解析,例如递归提取路由参数名:T extends ${string}:${infer P}/${infer Rest} ? P | Params : T extends ${string}:${infer P} ? P : never。Vue 的 defineEmits 与类型安全的 event emitter 大量用到。易错点:多个联合相乘会触发类型实例化过深;模板里放 string 会吞掉精确性,匹配范围远超预期。追问:与映射类型的 as 重映射组合生成 camelCase API 类型、TS 4.8 后对 infer 加约束的写法。
type EventName = `on${Capitalize<'click' | 'hover'>}` // 'onClick' | 'onHover'
type Size = `${number}px` | `${number}rem`