enums - 使用 FlowType 处理枚举

Question

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

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



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

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

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

export type Size = $Keys<typeof sizes>;

它的工作原理是指出 Prop 的无效值:


然而，这个解决方案是有代价的:它搞砸了我所有的 自动完成功能 ... :( 有没有更好的方法来处理 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目的。