TypeScript 长期以来允许为单个字符串或数字值描述字面量类型,但随着模板字面量的出现,具体字符串模板的类型化需求也随之产生。模板字面量类型增加了基于字符串的模板连接描述类型的能力,从而提供了字符串值结构的静态验证。
通过普通的字符串类型检查字符串是否符合特定格式(例如 'user_42')是不可行的——这些类型太过宽泛。没有模板类型,编译器无法确保字符串符合严格规定的模式。
模板字面量类型允许在编译期间构造复杂的字符串类型,并确保它们符合特定模板的严格检查。
代码示例:
type UserId = `user_${number}`; function loadUser(id: UserId) { // ... } loadUser('user_123'); // 正确 loadUser('admin_123'); // 编译错误
关键特点:
模板字面量类型只能与 number/literal 一起使用吗?可以在模板中使用自己的字符串字面量吗?
可以使用任何字面量类型——字符串、数字、联合类型:
type EventType = `event_${'click' | 'hover'}`; // event_click | event_hover
如果函数期望模板字面量类型,可以传递普通字符串吗?
不可以,如果类型明确期望字面量模板,普通字符串不合适:
function handler(type: `btn_${string}`) {} handler('btn_click'); // 可以 handler('button'); // 编译错误
模板字面量类型是否与映射类型和 keyof 结合使用?
可以,模板字面量类型可以很好地与映射类型和对象键结合使用:
const colors = {red: 1, blue: 2}; type ColorKey = keyof typeof colors; type ColorClass = `color-${ColorKey}`; // color-red | color-blue
API 接受 ID 形式为 'user_XXX',函数未进行类型化——可能传递任何字符串,服务器错误时会出现 bug。
优点:
缺点:
使用类型 UserId = user_${number},在编译前保证函数参数的正确性以及对服务器的安全请求。
优点:
缺点: