TypeScript：基于常量数组约束接口字段成员类型的方法

实现步骤 #

1. 给常量数组添加as const断言
   默认情况下TypeScript会把数组里的字符串值宽泛推导为string类型，丢失精确的字面量信息，添加as const后会将数组转为只读元组类型，保留每一项的精确值：

export const PROPERTYOPTIONS = [
  { value: "tag", label: "Tag" }, 
  { value: "composition", label: "Composition" },
  { value: "solvent", label: "Solvent" },
  { value: "allergen", label: "Allergen" },
  { value: "category", label: "Category" },
  { value: "other", label: "Other" },
] as const;

2. 通过索引访问类型提取数组成员联合类型
   用typeof 常量名[number]的写法，直接拿到数组所有项组成的联合类型，不需要手动枚举所有值：

// 自动推导为和数组项一一对应的对象联合类型
type PropertyOption = typeof PROPERTYOPTIONS[number];

interface CreatePropertyModalState {
  type: PropertyOption;
}

效果说明 #

• 赋值type字段时，只能传入PROPERTYOPTIONS中已经存在的对象项，传入自定义对象、value/label不匹配的内容都会触发类型报错
• 后续增删PROPERTYOPTIONS的数组项时，类型约束会自动同步，不需要手动修改联合类型定义，完全消除冗余代码

注意：如果不加as const断言，typeof PROPERTYOPTIONS[number]会被推导为{value: string, label: string}的宽泛类型，无法实现精确的字面量约束。如果需要去掉自动生成的readonly修饰，可以通过映射类型转换：

type PropertyOption = {
  -readonly [K in keyof typeof PROPERTYOPTIONS[number]]: typeof PROPERTYOPTIONS[number][K]
};

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