如何在React TypeScript接口中用数组定义可选值类型？

你需要让TypeScript将数组推断为具体的字符串字面量元组，而不是宽泛的string[]，然后提取数组元素的联合类型，以下是两种常用方法：

方法一：使用as const断言（推荐，保留运行时数组） #

通过as const告诉TypeScript，数组的元素是不可变的字面量值，这样它会推断出每个元素的具体类型，而不是笼统的string：

// 用as const断言让TypeScript推断字面量元组类型
const buttonTypes = ["string1", "string2", "string3"] as const;

interface IProps {
  // 用typeof buttonTypes[number]提取数组所有元素的联合类型
  buttonType: typeof buttonTypes[number];
}

// 测试：只能传入数组里的字面量值，其他值会报错
const props: IProps = {
  buttonType: "string1" // 合法
  // buttonType: "invalid" // 类型错误
};

原理说明 #

• as const将数组转换为readonly ["string1", "string2", "string3"]类型，每个元素都是具体的字符串字面量
• typeof buttonTypes[number]会遍历元组的所有元素类型，生成联合类型"string1" | "string2" | "string3"

方法二：使用const enum（适合不需要运行时数组的场景） #

如果只需要类型约束，不需要在运行时使用这个数组，可以用const enum直接定义字面量联合类型：

const enum ButtonType {
  String1 = "string1",
  String2 = "string2",
  String3 = "string3"
}

interface IProps {
  buttonType: ButtonType;
}

// 测试
const props: IProps = {
  buttonType: ButtonType.String1 // 合法
};

这种方式编译后不会生成额外的JavaScript代码，适合仅做类型约束的场景。

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