`${T}` 模板字面量类型
最后更新：2026-10-22
`${T}` 模板字面量类型
模板字面量类型在类型层做字符串拼接：`${A}-${B}` 会把 A、B 的所有字面量组合枚举出来。适合事件名、路由、CSS 类名等"前缀+后缀"式的字符串约定。
| 分组 | 类型组合 |
|---|---|
| 类型 | 类型 |
| 严格模式 | 不需要 |
ℹ️ 说明 编辑器将 TypeScript 转译为 JavaScript 后运行（不做类型检查）；类型检查结果见示例 Output。
📝 语法
type Lang = "zh" | "en";
type Page = "home" | "about";
type Route = `/${Lang}/${Page}`; // 4 种组合的联合⚙️ 参数
| `${T}` | 占位符里放字面量联合类型；联合成员会展开成笛卡尔积 |
|---|---|
| Uppercase/Lowercase | 内置字符变换工具类型，与模板字面量同机制 |
返回值：一个由所有字符串组合构成的联合类型——纯编译期产物，运行时不存在。
▶ 示例
修改下面的代码，点击试一试查看转译运行结果：
输出：
user:created | order:deleted
（转译后运行输出；把 "user:updated" 放进数组会得到编译错误——它不在 4 种组合之内）💡 要点
ℹ️ 说明 占位符必须是字面量类型（string | number 也行，但联合展开只发生在字面量联合上）；组合数是各联合大小的乘积。
💡 提示 配合条件类型的 infer 可以从字符串类型里"提取"片段：type OnEvent<T> = T extends `on${infer E}` ? E : never。
⚠️ 注意 联合成员一多组合数会爆炸（10×10 就是 100 个分支），拖慢编译；控制联合大小或改用 string。
🏷️ 相关类型组合
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 模板字面量类型运行时存在吗？
A 不存在。它是纯编译期类型运算，转译后消失；运行时只有普通的字符串值。
Q 怎么从字符串类型里提取一部分？
A 条件类型 + infer：type Event<T> = T extends `on${infer Name}` ? Name : never。把 onCreated 收窄成 created。详见 infer-keyword 条目。
Q Uppercase<T> 这类内置类型也是模板字面量类型吗？
A 是，Uppercase/Lowercase/Capitalize/Uncapitalize 基于同一机制对字符做变换，可以和自定义模板字面量类型自由组合。
