IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    TS – 字面量类型

    zhuxy发表于 2024-05-13 13:03:23
    love 0

    在 TypeScript 中,字面量类型(Literal Types)是指那些与特定字面量值严格对应的类型。字面量类型包括字符串字面量类型、数字字面量类型和布尔字面量类型。使用字面量类型可以提高代码的准确性和可读性,因为它们限制变量只能赋值为特定的字面量。

    字符串字面量类型

    字符串字面量类型用于定义一个只能是特定字符串值的变量。

    type EventType = "click" | "mouseover" | "keydown";
    const eventType: EventType = "click";
    

    在这个例子中,EventType 是一个字符串字面量类型,它只能是 "click"、"mouseover" 或 "keydown" 中的一个。

    数字数面量类型

    数字字面量类型用于定义一个只能是特定数字值的变量。

    type StatusCode = 200 | 301 | 404 | 500;
    const status: StatusCode = 200;
    

    在这个例子中,StatusCode 是一个数字字面量类型,它只能是 200、301、404 或 500 中的一个。

    布尔字面量类型

    布尔字面量类型用于定义一个只能是布尔值 true 或 false 的变量。

    type BooleanValue = true | false;
    const isReady: BooleanValue = false;
    

    在这个例子中,isReady 变量只能被赋值为 true 或 false。

    使用场景

    字面量类型在定义枚举类型的替代品、限制字符串或数字只能为特定值时非常有用。它们也常用于类型守卫中,以确保变量的值符合预期。

    interface User {
      name: string;
      onlineStatus: "online" | "offline";
    }
    
    function printUserStatus(user: User) {
      if (user.onlineStatus === "online") {
        console.log(`${user.name} is online.`);
      } else {
        console.log(`${user.name} is offline.`);
      }
    }
    

    在这个例子中,onlineStatus 字段使用了一个字符串字面量类型,它限制了 onlineStatus 只能是 "online" 或 "offline"。

    与 enum 的异同

    字面量类型(Literal Types)和枚举(Enums)在 TypeScript 中都用于限制变量的取值范围,但它们之间存在一些区别。让我们来看看它们的异同,并通过例子加以说明。

    相同之处:

    1. 限制取值范围: 字面量类型和枚举都用于限制变量的取值范围,确保变量只能取特定的值。

    2. 增强可读性: 它们都可以使代码更易读,因为它们充当了一种语义化的标记,说明变量的含义。

    不同之处:

    1. 定义方式:

      • 字面量类型: 字面量类型使用字面量直接定义变量的取值,例如 'success' | 'failure'。
      • 枚举: 枚举使用标识符(identifier)来定义变量的取值,例如 enum Status { Success, Failure }。
    2. 类型形式:

      • 字面量类型: 字面量类型是一种类型,可以与其他类型组合使用,如联合类型,交叉类型等。
      • 枚举: 枚举本身就是一种类型,枚举成员是唯一的标识符,但枚举类型本身也是一种类型。
    3. 可扩展性:

      • 字面量类型: 字面量类型不易扩展。一旦定义了字面量类型,就只能使用其中的值。
      • 枚举: 枚举是可以扩展的。你可以向枚举中添加新的成员。

    示例:

    使用字面量类型:

    type Status = 'success' | 'failure';
    
    function logStatus(status: Status) {
      console.log(`Status: ${status}`);
    }
    
    logStatus('success'); // 合法
    logStatus('failure'); // 合法
    // logStatus('error'); // 不合法,只能是 'success' 或 'failure'
    

    使用枚举:

    enum Status {
      Success,
      Failure,
    }
    
    function logStatus(status: Status) {
      console.log(`Status: ${status}`);
    }
    
    logStatus(Status.Success); // 合法
    logStatus(Status.Failure); // 合法
    // logStatus('error'); // 不合法,只能是 Status.Success 或 Status.Failure
    

    在这个示例中,Status 被限制为 'success' 或 'failure' 两个字面值或 Status.Success 和 Status.Failure 两个枚举成员。使用字面量类型和枚举都能实现相同的效果,但具体选择取决于需求和个人偏好。通常来说,如果变量的取值是固定且不可扩展的,字面量类型更合适;如果需要一组有序的标识符,并且可能会扩展,枚举更为适用。

    注意事项

    • 字面量类型是 TypeScript 的基本类型之一,它们提供了一种方式来定义更精确的类型。
    • 字面量类型通常用于小型、固定的值集合,例如状态码、错误码或特定的配置选项。
    • 字面量类型可以与联合类型结合使用,以创建一个可以是多个特定字面量值的类型。

    通过使用字面量类型,你可以提高代码的类型安全性,减少运行时错误,并使代码的意图更加清晰。



沪ICP备19023445号-2号
友情链接