前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >React 播客专栏 Vol.8|枚举 & 联合类型:让你的代码“只能选对的那个”

React 播客专栏 Vol.8|枚举 & 联合类型:让你的代码“只能选对的那个”

作者头像
前端达人
发布2025-05-12 13:35:20
发布2025-05-12 13:35:20
2400
代码可运行
举报
文章被收录于专栏:前端达人前端达人
运行总次数:0
代码可运行

今天我们继续在 TypeScript 的工具箱里掏宝贝:枚举(enum)联合类型(union)

它们的作用很简单 —— 让变量的取值范围“变得有限”,从而更安全、更可控

🧭 Part 1|枚举:给变量一个更“有语义”的名字

假如你要定义一周天气状态:

在 JS 里可能这么写:

代码语言:javascript
代码运行次数:0
运行
复制
let weather = "sunny"; // 或 "cloudy"、"rainy"

在 TS 里我们可以用 枚举(enum) 让这些字符串变得结构化、可提示、好维护:

代码语言:javascript
代码运行次数:0
运行
复制
enum Weather {
  Sunny,
  Cloudy,
  Rainy,
  Snowy
}

然后你就可以这样使用:

代码语言:javascript
代码运行次数:0
运行
复制
let today: Weather = Weather.Sunny;

📌 默认情况下,枚举值是数字(从 0 开始递增)。你也可以手动赋值为数字或字符串。

⚠️ 枚举注意事项:

❌ 数字枚举可能“不太安全”

代码语言:javascript
代码运行次数:0
运行
复制
enum Level {
  Low = 1,
  Medium = 2,
  High = 3
}

let l: Level = 10; // ❗不会报错!数字枚举不够严谨

✅ 字符串枚举更可靠!

代码语言:javascript
代码运行次数:0
运行
复制
enum Level {
  Low = "L",
  Medium = "M",
  High = "H"
}

let level: Level = "H"; // ✅ 正确
level = "X"; // ❌ 报错,不在枚举中

🎯 建议:优先使用字符串枚举,类型检查更严格,IDE 提示也更友好。

🔀 Part 2|联合类型:变量可以是多个类型之一

有些时候,一个变量可能是“这个或者那个”——TypeScript 提供了 联合类型(union type)

语法:用 | 来连接多个可能的类型。

代码语言:javascript
代码运行次数:0
运行
复制
type NullableDate = Date | null;

let lastLogin: NullableDate = new Date();
lastLogin = null; // ✅ 也是合法的

📌 非常适合用于可空值(null)、多种返回格式、状态等场景。

🎨 字符串联合类型:比 enum 更轻便!

如果你只是希望变量在几个固定字符串中选一个,其实没必要搞枚举,可以直接写联合类型:

代码语言:javascript
代码运行次数:0
运行
复制
type RGB = "red" | "green" | "blue";

let color: RGB = "red"; // ✅
color = "yellow"; // ❌ 报错

这种方式更轻量,也不引入额外代码结构,非常适合状态、方向、角色等场景:

代码语言:javascript
代码运行次数:0
运行
复制
type Direction = "left" | "right" | "up" | "down";
type Status = "success" | "error" | "loading";

🤔 枚举 vs 联合类型怎么选?

比较维度

枚举(enum)

字符串联合类型

可读性

✅ 高,适合多人协作

✅ 也不错,但依赖命名清晰

类型检查

数字枚举❌,字符串枚举✅

✅ 严格

编译后代码体积

稍大(会生成代码)

零成本(纯类型)

用例

需要语义化映射(如 Level.Low)

状态、标签、方向等轻结构

💡 结论:

  • ✅ 如果只是几个字符串值:用字符串联合类型
  • ✅ 如果需要结构化、可扩展的值:用字符串枚举

✅ 本期知识卡小结:

关键词

说明

enum

定义有名字的固定值集合,支持数字或字符串

字符串枚举

类型更安全,推荐使用

联合类型

联合类型

表示变量可能是多种类型中的一种

字符串联合类型

变量只能取几个特定字符串值

使用建议

字符串值建议用联合类型;结构值可用枚举

📩 如果你觉得今天这集干货满满,欢迎【转发 + 收藏】支持我们更新!

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

本文分享自 前端达人 微信公众号,前往查看

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 🧭 Part 1|枚举:给变量一个更“有语义”的名字
    • ⚠️ 枚举注意事项:
      • ❌ 数字枚举可能“不太安全”
      • ✅ 字符串枚举更可靠!
  • 🔀 Part 2|联合类型:变量可以是多个类型之一
  • 🎨 字符串联合类型:比 enum 更轻便!
  • 🤔 枚举 vs 联合类型怎么选?
  • ✅ 本期知识卡小结:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档