⚡ 编程实验室🏗️ HTML🎨 CSS⚡ JavaScript🐍 Python🗄️ SQL☕ Java⚛️ React💚 Vue🟢 Node.js⚙️ C语言🐘 PHP🐹 Go🔷 TypeScript🐬 MySQL🔧 C++🎯 C#🦀 Rust🅱️ Bootstrap💡 jQuery🎸 Django🍃 MongoDB👗 Sass🎪 Kotlin📊 R语言📋 XML📊 Excel🐘 PostgreSQL🐳 Docker🅰️ Angular🎮 游戏🏠 网站首页

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'。

Ctrl+Enter
🚀 升级VIP
解锁全部课程+AI助手

🏆 学习排行

加载中...

📊 统计

📖 200 篇
0 完成
🔥 0