使用FlowType处理枚举

Question

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

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

然而,我还想在组件内部使用这些值:让我们说一个带有可用大小值的下拉菜单.

为了实现这一点,我正在维护一个大小对象,我可以通过利用$ Keys来提取Size FlowType :

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

export type Size = $Keys<typeof sizes>;

它有点工作,因为它指出了道具的无效值:

然而,这个解决方案需要付出代价:它会破坏我所有的自动完成功能 ...... :(有没有更好的方法来处理FlowType中的Enums？

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。