用FlowType处理Enum

Question

export type Size =
| 'small'
| 'medium'
| 'large'
| 'big'
| 'huge';

像这样定义Size类型使我可以在我的IDE中使用它的任何地方自动完成：

​

​

然而，我也希望在组件中使用这些值:假设下拉菜单w/可用大小值。

为了实现这一点，我正在维护一个Size对象，通过利用$Keys，可以从中提取Size FlowType

export const sizes = {
  small: 'small',
  medium: 'medium',
  large: 'large',
  big: 'big',
  huge: 'huge',
};

export type Size = $Keys<typeof sizes>;

它的工作方式是指出支柱的无效值：

​

然而，这个解决方案是要付出代价的:它螺丝了我所有的自动完成优. :(有更好的方法来处理FlowType中的Enum吗？

​

​

Answer 1

这是对$Keys的巧妙使用！

我不知道有什么更好的方法从对象派生Size类型。也许你可以像这样朝另一个方向努力：

export type Size =
| 'small'
| 'medium'
| 'large'
| 'big'
| 'huge';

export const sizes: { [key: string]: Size } = {
  small: 'small',
  medium: 'medium',
  large: 'large',
  big: 'big',
  huge: 'huge',
};

或者以这种方式消除一些重复：

export const sizes: { [key: string]: Size } = [
  'small',
  'medium',
  'large',
  'big',
  'huge'
].reduce((obj, s) => {
  obj[s] = s
  return obj
}, {})

很明显那会使用更多的样板。但是，使用sizes上的类型约束，您至少可以得到一个检查，以防止无效字符串进入sizes对象。