如何在TSX中使用Object.freeze定义的枚举值作为组件Props类型

1. 提取枚举值的联合类型 #

可以通过typeof DaysOfWeek[keyof typeof DaysOfWeek]获取枚举对象中所有值的联合类型，给它定义类型别名后就能直接用于props的类型限定：

const DaysOfWeek = Object.freeze({
  SUNDAY: "str1",
  MONDAY: "str2"
});

// 提取所有枚举值的联合类型
type DayOfWeekValue = typeof DaysOfWeek[keyof typeof DaysOfWeek];

// 在组件props中使用该类型
const MyComp = (props: { dayOfWeek: DayOfWeekValue }) => {
  if (props.dayOfWeek === DaysOfWeek.SUNDAY) {
    // 业务逻辑处理
  }
  return <div>{props.dayOfWeek}</div>;
};

此时TypeScript会强制校验dayOfWeek只能是"str1"或"str2"，传入其他字符串会直接触发类型错误，实现强校验。

2. 直接在props中使用类型表达式 #

如果不想额外定义类型别名，也可以直接把类型表达式写在props的类型定义里：

const MyComp = (props: { dayOfWeek: typeof DaysOfWeek[keyof typeof DaysOfWeek] }) => {
  // 组件逻辑代码
};

3. 可选方案：改用TypeScript原生枚举 #

如果项目本身基于TypeScript开发，直接使用原生枚举会更简洁：

enum DaysOfWeek {
  SUNDAY = "str1",
  MONDAY = "str2"
}

const MyComp = (props: { dayOfWeek: DaysOfWeek }) => {
  if (props.dayOfWeek === DaysOfWeek.SUNDAY) {
    // 业务逻辑处理
  }
};

这种方式下，dayOfWeek会被自动限定为枚举的有效值，同时保留枚举的键值映射能力。

内容的提问来源于stack exchange，提问作者gene b.