Typescript 如何重构长联合类型

发布于02月14日

我想创建一个Reaction功能组件，它将预定义的组件之一作为props ，哪个逻辑取决于传入的组件.

因此，以下是可能的名称:

enum ComponentName {
  ComponentA: "component.a",
  ComponentB: "component.b",
  ComponentC: "component.c",
  // etc
}

现在最难的是，我有一组组件类型，它们的名称都在枚举中，如下所示:

type ComponentA = {
  attributes: {
    // ...
  }
}

type ComponentB = {
  attributes: {
    // ...
  }
}

现在，我想要做的是以某种方式定义类型组件，以便:

type Component = 
| {
    id: string;
    name: ComponentName.ComponentA;
    component: ComponentA;
  }
| {
    id: string;
    name: ComponentName.ComponentB;
    component: ComponentB;
  }
| // ...

有没有一种方法可以通过映射ComponentName多个枚举并将枚举属性匹配到组件类型名称来简化这种联合类型？

推荐答案

我认为，如果在组件名称和它们的属性之间有某种映射，那么可以使用以下帮助函数从该映射创建一个联合，

type Values<T> = T[keyof T];

Values从映射类型或对象的值生成联合类型.

enum ComponentName {
  ComponentA = "component.a",
  ComponentB = "component.b",
  ComponentC = "component.c",
}

type ComponentMappings = {
  [ComponentName.ComponentA]: {
    attributes: {
      className: string;
    };
  };
  [ComponentName.ComponentB]: {
    attributes: {
      className: string;
      foo: number;
    };
  };
  [ComponentName.ComponentC]: {
    attributes: {
      className: string;
    };
  };
};

type Values<T> = T[keyof T];

type Component = Values<{
  [K in ComponentName]: {
    id: string;
    name: K;
    component: ComponentMappings[K];
  };
}>;

const comopnentA: Component = {
  name: ComponentName.ComponentA,
  id: "component-a",
  component: {
    attributes: {
      className: "flex",
    },
  },
};

const componentB: Component = {
  name: ComponentName.ComponentB,
  id: "component-B",
  component: {
    attributes: {
      className: "flex",
      foo: 3,
    },
  },
};

TypesSript Playground个

请注意，操场上的Prettify文字没有任何作用，当您将鼠标悬停在该文字上时，只会使其更具可读性.