TS 模板字面量类型:字符串的精确模式
掌握模板字面量类型,创建基于字符串模式的精确类型约束。 · 难度:入门 · +15XP
模板字面量类型简介
模板字面量类型是 TypeScript 4.1 引入的强大特性,它允许你使用模板字符串语法来定义字符串类型的模式。通过结合联合类型,你可以创建出精确的字符串字面量组合,适用于事件名称、API 路径等场景。
基本语法
type EventName = on${'Click' | 'Hover' | 'Focus'};
// 结果: 'onClick' | 'onHover' | 'onFocus'高级用法:类型转换
| 内置类型工具 | 作用 |
|---|---|
| Uppercase | 全部大写 |
| Lowercase | 全部小写 |
| Capitalize | 首字母大写 |
| Uncapitalize | 首字母小写 |
代码示例
type CSSProperty = 'margin' | 'padding';
type CSSDirection = 'top' | 'right' | 'bottom' | 'left';
type CSSDeclaration = ${CSSProperty}-${CSSDirection};
// 生成所有组合: 'margin-top' | 'margin-right' ...练习提示:创建一个类型,表示所有 HTTP 方法(GET、POST、PUT、DELETE)与路径 '/user' 的组合,如 'GET /user'。