TypeScript泛型如何约束入参为枚举并将枚举值作为对象键类型

错误原因 #

TS要求对象的键必须是string | number | symbol类型的子集，你定义的泛型参数Steps没有加任何类型约束，TS无法确认它可以作为对象键使用，因此抛出类型不匹配错误。

解决方法 #

给泛型参数Steps添加类型约束即可，修正后的代码如下：

// 给泛型参数添加上可作为对象键的类型约束
export interface WizardContextValues<Steps extends string | number | symbol> {
  currentStep: number;
  setStep: (stepState: number) => void;
  completedSteps: { [key in Steps]: boolean };
  setCompletedSteps: (state: { [key in Steps]: boolean }) => void;
  disabledSteps: { [key in Steps]: boolean };
}

业务场景适配验证 #

这个写法同时兼容数字枚举、字符串枚举，你提到的上传场景枚举可以直接正常使用：

export enum UploadWizardSteps {
  UPLOAD_FILE,
  GIVE_DETAILS,
  CONFIRMATION
}

// 无报错，生成的类型会严格约束三个属性的键必须是UploadWizardSteps的枚举值
type UploadWizardContext = WizardContextValues<UploadWizardSteps>

如果业务中不需要completedSteps/disabledSteps必须包含所有枚举键，可以用Partial包裹对象类型，修改对应行即可：

completedSteps: Partial<{ [key in Steps]: boolean }>;

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