TS 模板字面量类型：动态类型构建

学习 TypeScript 模板字面量类型，用于基于字符串模式创建精确的类型。 · 难度：入门 · +15XP

模板字面量类型简介

模板字面量类型是 TypeScript 4.1 引入的特性，允许我们使用模板字符串的语法来定义类型。它可以将字面量类型组合成复杂的字符串模式。

基本语法

type EventName = 'click' | 'focus' | 'blur';
type Handler = on${Capitalize<EventName>};
// 结果：'onClick' | 'onFocus' | 'onBlur'

常用工具类型

实际应用

type CSSValue = 'sm' | 'md' | 'lg';
type CSSClass = padding-${CSSValue} | margin-${CSSValue};
// 'padding-sm' | 'padding-md' | 'padding-lg' | 'margin-sm' | 'margin-md' | 'margin-lg'
function applyStyle(className: CSSClass) {
  console.log(Applying ${className});
}
applyStyle('padding-md');  // 正确
// applyStyle('padding-xl');  // 错误：不在类型中

练习提示

创建一个 Color 类型为 'red' | 'green' | 'blue'，使用模板字面量类型生成 'dark-red' | 'light-green' 等组合。再编写一个函数，接受这些组合作为参数。