如何编写可接受多种枚举类型的TypeScript函数？

你可以通过泛型接口和泛型组件实现，既避免any的松散性，又能严格约束options为指定枚举的成员。以下是两种实用的实现方式：

方式一：约束枚举成员类型 #

这种方式直接将泛型限定为枚举成员的类型（数字或字符串），适配大多数常规场景：

enum Fruits {
  Apples,
  Oranges,
  Pears
}

enum Vegetables {
  Peas,
  Carrots,
  Lettuce
}

// 泛型接口，T约束为枚举成员的类型（number/string）
interface IDisplayOptions<T extends number | string> {
  options: T[]; // 若需单个枚举值，直接改为T即可
}

// 泛型组件
const DisplayOptions = <T extends number | string>({ options }: IDisplayOptions<T>) => {
  // 此处可安全使用options，类型已被严格约束
  console.log(options);
  return null; // 根据实际组件逻辑调整返回内容
};

// 使用示例
DisplayOptions({ options: [Fruits.Apples, Fruits.Oranges] });
DisplayOptions({ options: [Vegetables.Carrots, Vegetables.Lettuce] });

TypeScript会自动推断泛型参数，无需显式声明，同时确保options只能传入对应枚举的成员。

方式二：直接约束枚举类型 #

如果需要更明确地绑定到枚举本身，可以通过Record<string, number | string>约束泛型，再提取枚举成员类型：

enum Fruits {
  Apples,
  Oranges,
  Pears
}

enum Vegetables {
  Peas,
  Carrots,
  Lettuce
}

// 泛型接口，T约束为枚举结构
interface IDisplayOptions<T extends Record<string, number | string>> {
  options: T[keyof T][]; // 提取枚举的成员类型组成数组
}

// 泛型组件
const DisplayOptions = <T extends Record<string, number | string>>({ options }: IDisplayOptions<T>) => {
  console.log(options);
  return null;
};

// 使用时可显式指定枚举类型（也可让TS自动推断）
DisplayOptions<Fruits>({ options: [Fruits.Apples, Fruits.Pears] });
DisplayOptions<Vegetables>({ options: [Vegetables.Peas] });

这种方式更清晰地关联到枚举类型本身，适合需要针对枚举做额外逻辑处理的场景。

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