前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TypeScript - 字面量类型

TypeScript - 字面量类型

作者头像
前端黑板报
发布2024-05-21 14:43:30
580
发布2024-05-21 14:43:30
举报
文章被收录于专栏:前端黑板报前端黑板报

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

字符串字面量类型

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

代码语言:javascript
复制
type EventType = "click" | "mouseover" | "keydown";
const eventType: EventType = "click";

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

数字数面量类型

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

代码语言:javascript
复制
type StatusCode = 200 | 301 | 404 | 500;
const status: StatusCode = 200;

在这个例子中,StatusCode 是一个数字字面量类型,它只能是 200301404500 中的一个。

布尔字面量类型

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

代码语言:javascript
复制
type BooleanValue = true | false;
const isReady: BooleanValue = false;

在这个例子中,isReady 变量只能被赋值为 truefalse

使用场景

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

代码语言:javascript
复制
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. 1. 限制取值范围: 字面量类型和枚举都用于限制变量的取值范围,确保变量只能取特定的值。
  2. 2. 增强可读性: 它们都可以使代码更易读,因为它们充当了一种语义化的标记,说明变量的含义。

不同之处:

  1. 1. 定义方式:
    • 字面量类型: 字面量类型使用字面量直接定义变量的取值,例如 'success' | 'failure'
    • 枚举: 枚举使用标识符(identifier)来定义变量的取值,例如 enum Status { Success, Failure }
  2. 2. 类型形式:
    • 字面量类型: 字面量类型是一种类型,可以与其他类型组合使用,如联合类型,交叉类型等。
    • 枚举: 枚举本身就是一种类型,枚举成员是唯一的标识符,但枚举类型本身也是一种类型。
  3. 3. 可扩展性:
    • 字面量类型: 字面量类型不易扩展。一旦定义了字面量类型,就只能使用其中的值。
    • 枚举: 枚举是可以扩展的。你可以向枚举中添加新的成员。

示例:

使用字面量类型:
代码语言:javascript
复制
type Status = 'success' | 'failure';

function logStatus(status: Status) {
  console.log(`Status: ${status}`);
}

logStatus('success'); // 合法
logStatus('failure'); // 合法
// logStatus('error'); // 不合法,只能是 'success' 或 'failure'
使用枚举:
代码语言:javascript
复制
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.SuccessStatus.Failure 两个枚举成员。使用字面量类型和枚举都能实现相同的效果,但具体选择取决于需求和个人偏好。通常来说,如果变量的取值是固定且不可扩展的,字面量类型更合适;如果需要一组有序的标识符,并且可能会扩展,枚举更为适用。

注意事项

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-05-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端黑板报 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 字符串字面量类型
  • 数字数面量类型
  • 布尔字面量类型
  • 使用场景
  • 与 enum 的异同
  • 相同之处:
  • 不同之处:
  • 示例:
    • 使用字面量类型:
      • 使用枚举:
      • 注意事项
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档