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

前端达人

发布于 2025-05-12 13:35:20

2400

代码可运行

文章被收录于专栏：前端达人前端达人

运行总次数：0

代码可运行

今天我们继续在 TypeScript 的工具箱里掏宝贝：枚举（enum） 和 联合类型（union）！

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

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

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

在 JS 里可能这么写：

let weather = "sunny"; // 或 "cloudy"、"rainy"

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

enum Weather {
  Sunny,
  Cloudy,
  Rainy,
  Snowy
}

然后你就可以这样使用：

let today: Weather = Weather.Sunny;

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

enum Level {
  Low = 1,
  Medium = 2,
  High = 3
}

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

enum Level {
  Low = "L",
  Medium = "M",
  High = "H"
}

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

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

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

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

type NullableDate = Date | null;

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

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

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

type RGB = "red" | "green" | "blue";

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

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

type Direction = "left" | "right" | "up" | "down";
type Status = "success" | "error" | "loading";

💡 结论：