字面量类型与模板字面量类型

字面量类型简介

在TypeScript中，字面量类型（Literal Types）允许我们将一个值直接作为类型使用。这意味着变量或参数只能被赋予特定的值，而不是任意值。

基本字面量类型

TypeScript支持三种基本的字面量类型：

1. 字符串字面量类型：

   typescript 复制代码

   let direction: 'left' | 'right' | 'up' | 'down';
   direction = 'left'; // 正确
   direction = 'north'; // 错误：'north'不在允许的选项中

2. 数字字面量类型：

   typescript 复制代码

   let diceRoll: 1 | 2 | 3 | 4 | 5 | 6;
   diceRoll = 3; // 正确
   diceRoll = 7; // 错误：7不在允许的选项中

3. 布尔字面量类型：

   typescript 复制代码

   let isTrue: true;
   isTrue = true; // 正确
   isTrue = false; // 错误：只能为true

字面量类型的应用

字面量类型常用于限制函数的参数或返回值：

function setStatus(status: 'active' | 'inactive' | 'pending') {
  // ...
}

setStatus('active'); // 正确
setStatus('deleted'); // 错误

模板字面量类型

TypeScript 4.1引入了模板字面量类型（Template Literal Types），它允许我们基于字符串模板创建类型，类似于JavaScript中的模板字符串。

基本语法

模板字面量类型使用反引号（`）和${}插值语法：

type World = 'world';
type Greeting = `hello ${World}`; // 等同于 'hello world'

联合类型与模板字面量

当模板字面量类型与联合类型结合时，TypeScript会生成所有可能的组合：

type VerticalAlignment = 'top' | 'middle' | 'bottom';
type HorizontalAlignment = 'left' | 'center' | 'right';

type Alignment = `${VerticalAlignment}-${HorizontalAlignment}`;
// 等同于：
// 'top-left' | 'top-center' | 'top-right' |
// 'middle-left' | 'middle-center' | 'middle-right' |
// 'bottom-left' | 'bottom-center' | 'bottom-right'

实用工具类型

TypeScript提供了一些内置工具类型来配合模板字面量类型：

1. Uppercase：将字符串转换为大写
2. Lowercase：将字符串转换为小写
3. Capitalize：将字符串首字母大写
4. Uncapitalize：将字符串首字母小写

type Method = 'get' | 'post' | 'put' | 'delete';
type CapitalizedMethod = Capitalize<Method>; // 'Get' | 'Post' | 'Put' | 'Delete'

实际应用示例

1. CSS属性类型：

   typescript 复制代码

   type CSSValue = `${number}px` | `${number}em` | `${number}rem`;
   
   function setPadding(padding: CSSValue) {
     // ...
   }
   
   setPadding('10px'); // 正确
   setPadding('20em'); // 正确
   setPadding('5vw'); // 错误

2. 事件处理函数：

   typescript 复制代码

   type EventName = 'click' | 'hover' | 'scroll';
   type HandlerName = `on${Capitalize<EventName>}`;
   // 等同于 'onClick' | 'onHover' | 'onScroll'
   
   const handlers: Record<HandlerName, () => void> = {
     onClick: () => console.log('Clicked!'),
     onHover: () => console.log('Hovered!'),
     onScroll: () => console.log('Scrolled!'),
   };

总结

字面量类型和模板字面量类型是TypeScript强大的类型系统的重要组成部分，它们允许开发者：

• 创建更精确的类型约束
• 减少运行时错误
• 提高代码的可读性和可维护性
• 实现复杂的类型组合和转换

通过合理使用这些特性，可以显著提升TypeScript项目的类型安全性，同时保持代码的简洁性和表达力。