前端/移动开发面试题更新 2026-08-05

请解释 TypeScript 中的模板字面量类型,它有哪些用途?

前端/移动开发技术原理TypeScript

考察说明

考查对 TypeScript 高级类型特性的理解与应用。

回答思路

  1. 【回答框架 1】模板字面量类型基于字符串字面量类型,通过反引号包裹并利用 ${} 占位符插入其他类型,从而构造新的字符串字面量类型,例如 type Greeting = `Hello, ${string}`。
  2. 【回答框架 2】它可以在编译期对字符串格式进行约束,常用于联合类型的状态拼接、事件名生成、CSS 类名组合等场景,能减少手写字符串类型并提升类型安全。
  3. 【回答框架 3】模板字面量类型支持与条件类型、infer 关键字结合,进行字符串模式的提取与转换,例如解析路由参数或实现字符串工具类型如 Capitalize。
  4. 【回答框架 4】在泛型中,模板字面量类型可以根据输入类型动态生成字符串类型,但需要注意它只能生成字面量类型集合,若占位符为宽泛类型(如 string)会扩大类型范围。
  5. 【回答框架 5】实际使用时,模板字面量类型适合静态可枚举的字符串组合,对于运行时动态拼接的字符串,应配合类型守卫或断言,避免过度依赖类型系统描述所有可能值。
  6. 【关键点 1】模板字面量类型使用反引号和 ${} 占位符,基于字符串字面量类型构造新类型。
  7. 【关键点 2】常用于生成联合类型、事件名、CSS 类名等,提升类型安全性。
  8. 【关键点 3】可与条件类型和 infer 结合,实现字符串模式的匹配与提取。
  9. 【关键点 4】若占位符为宽泛类型,生成的类型范围会扩大,需注意约束。
  10. 【关键点 5】适用于编译期可确定的字符串组合,动态拼接需运行时验证。
  11. 【易错点 1】不要滥用模板字面量类型描述所有动态字符串,否则类型过宽失去约束意义。
  12. 【易错点 2】容易忽略占位符类型对最终类型集合的影响,例如 string 会导致无限类型。
  13. 【易错点 3】使用 infer 提取时要注意匹配顺序和泛型约束,避免推断失败。