使用 FlowType 处理枚举

Question

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

像这样定义 Size 类型可以让我在我的 IDE 中自动完成，无论我在哪里使用它：

然而，我还想在组件内部使用这些值：假设是一个带有可用大小值的下拉菜单。

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

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

export type Size = $Keys<typeof sizes>;

它的工作原理在于它指出了道具的无效值：

然而，这个解决方案是有代价的：它搞砸了我所有的自动完成功能...:(有更好的方法来处理 FlowType 中的枚举吗？

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 对象。