TypeScript 泛型 - 期望类型参数是枚举，并引用它的键

Question

我正在尝试在 React 和 Typecript 中创建一个可重用的多步骤向导组件。该向导将需要通过 react 上下文对象将某些值传递给它。该上下文对象的值必须遵循一般模式:

export interface WizardContextValues {
  currentStep: number;
  setStep: (stepState: number) => void;
  completedSteps: { [key: string]: boolean };
  setCompletedSteps: (state: { [key: string]: boolean }) => void;
  disabledSteps: { [key: string]: boolean };
}

您可以看到 completedSteps和 disabledSteps ，我在等一个对象。但我想多限制一点。假设对于一个特定的向导，我有一个步骤枚举:

export enum UploadWizardSteps {
  UPLOAD_FILE,
  GIVE_DETAILS,
  CONFIRMATION
}

我想实际制作 WizardContextValues通用的，因此它将步骤枚举作为参数。像这样:

export interface WizardContextValues<Steps> {
  currentStep: number;
  setStep: (stepState: number) => void;
  completedSteps: { [key in Steps]: boolean };
  setCompletedSteps: (state: { [key in Steps]: boolean }) => void;
  disabledSteps: { [key in Steps]: boolean };
}

type UploadWizardContext = WizardContextValues<UploadWizardSteps>

我在尝试使用 key in Steps 时遇到错误，说 Type 'Steps' is not assignable to type 'string | number | symbol'. Type 'Steps' is not assignable to type 'symbol'

在定义通用 interface WizardContextValues<Steps> 时，这种方式是有道理的， typescript 不知道 Steps是一个枚举，它的键可以使用 key in 引用运营商。

typescript playground showing the issue

我怎样才能创建这个通用类型，使 UploadWizardContext 的某些属性成为可能？必须是键值为 UploadWizardSteps 的对象？

Answer 1

按照目前的编写方式，TypeScript 在 WizardContextValues 中使用时无法了解有关 Steps 的任何信息。您大概可以将其中的任何内容作为类型传递，包括不能用作键的内容。

您可以通过使用 extends 限制可用于 Steps 的类型来解决此问题。

默认情况下，TypeScript 枚举使用 number 值，但您可以使用更宽的 string |编号 | symbol 类型以完全反射(reflect)可用于对象属性的内容:

export enum UploadWizardSteps {
  UPLOAD_FILE,
  GIVE_DETAILS,
  CONFIRMATION
}

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 };
}

type UploadWizardContext = WizardContextValues<UploadWizardSteps>

TypeScript playground