如何使用流类型将枚举类型重构为泛型？答案

【问题标题】：How to refactor an enum's type to generic using in flowtype?如何使用流类型将枚举类型重构为泛型？
【发布时间】：2019-01-16 03:09:21
【问题描述】：

想象一下，我有 3 个类型为 {[key: string]: Type} 的枚举这很常见，我认为有一个泛型来减少重复会很好，但我不确定如何去做：我在想这样的事情：

export interface KeyType<T> {
  [key: string]: T;
}

并像这样使用它：

KeyType<HeadingOptionType>

但它不起作用:(。

在下面的示例中，我如何编写一个删除 {[key: string]} 重复的类型？

export const HeadingOption: {[key: string]: HeadingOptionType} = {
  H1: 1,
  H2: 2,
  H3: 3,
  H4: 4,
  H5: 5,
  H6: 6,
};

export const EnumColumn: {[key: string]: EnumColumnType} = {
  C1: 1,
  C2: 2,
  C3: 3,
  C4: 4, // not supported yet but should be.
};

export const RtlMirror: {[key: string]: RtlMirrorType} = {
  ON: true,
  OFF: false,
};

【问题讨论】：

标签： reactjs generics flowtype static-typing flow-typed

【解决方案1】：

我猜您在索引器属性方面遇到了错误。您可以通过将接口更改为类型别名来摆脱它：type KeyType<T> = { [string]: T };。

无论如何，我认为这样的类型没有用，因为您需要手动定义值类型。流中描述枚举的常见做法是：

const HEADING_OPTION = Object.freeze({
  H1: 1,
  H2: 2,
  H3: 3,
  H4: 4,
  H5: 5,
  H6: 6,
});

type HeadingOption = $Values<typeof HEADING_OPTION>;

let h1: HeadingOption = HEADING_OPTION.H1; // OK
h1 = 1; // OK

// $Expect error: Cannot assign `999` to `h1` because number is incompatible with enum 
h1 = 999;

【讨论】：

感谢您提供真正的答案！