TypeScript中如何实现PropTypes.oneOf功能？（非React场景）

嘿，这个问题问得很到位！在纯TypeScript环境下，我们有好几种方式能实现类似React PropTypes.oneOf的枚举值限制，而且都是编译时的强类型检查，比运行时的PropTypes更严谨。我给你梳理了最常用的几种方案：

1. 字符串字面量联合类型（最直接的替代方案） #

这是和PropTypes.oneOf最像的写法，直接把允许的取值用|组合成联合类型：

// 定义只能取'Home'或'About'的类型
type PageName = 'Home' | 'About';

// 合法的赋值
const currentPage: PageName = 'Home';

// 非法赋值会直接在编译时报错
// const wrongPage: PageName = 'Contact'; ❌ Type '"Contact"' is not assignable to type 'PageName'.

这种方式简单直接，不需要额外的语法，TypeScript会严格校验变量的取值是否在指定的集合里。

2. 使用枚举（Enum） #

如果需要更清晰的命名规范，或者后续可能扩展取值，枚举是个不错的选择：

// 定义枚举，明确允许的页面名称
enum PageName {
  Home = 'Home',
  About = 'About'
}

// 通过枚举成员赋值，避免手写字符串的拼写错误
const currentPage: PageName = PageName.Home;

// 非法赋值同样会报错
// const wrongPage: PageName = 'Contact'; ❌ Type '"Contact"' is not assignable to type 'PageName'.

枚举的优势在于可以统一管理取值，后续要新增页面时，直接在枚举里添加新成员即可，所有用到这个类型的地方都会自动获得类型提示。

3. 基于数组生成联合类型（适合已有取值集合的场景） #

如果你已经有一个包含允许值的数组，可以用const断言配合typeof来自动生成联合类型，避免重复写取值：

// 用as const断言让TypeScript保留数组元素的字面量类型
const allowedPages = ['Home', 'About'] as const;

// 从数组元素生成联合类型
type PageName = typeof allowedPages[number];

// 合法赋值
const currentPage: PageName = 'Home';

// 非法赋值报错
// const wrongPage: PageName = 'Contact'; ❌ Type '"Contact"' is not assignable to type '"Home" | "About"'.

这种方式的好处是维护成本低，只要更新数组，对应的类型就会自动更新，不用手动修改联合类型的定义。

额外补充：结合运行时验证 #

TypeScript的类型检查是编译时的，如果需要像PropTypes那样在运行时验证取值（比如处理后端返回的不确定数据），可以写一个类型守卫函数：

type PageName = 'Home' | 'About';

// 类型守卫函数，验证值是否符合PageName类型
function isPageName(value: unknown): value is PageName {
  return typeof value === 'string' && ['Home', 'About'].includes(value);
}

// 使用示例
const input = 'Home';
if (isPageName(input)) {
  // 这里input会被自动收窄为PageName类型
  const currentPage: PageName = input;
}

这样既保留了TypeScript的编译时类型安全，又能在运行时做取值验证，完美复刻PropTypes的核心功能。

内容的提问来源于stack exchange，提问作者aWebDeveloper