在 Typescript 中用枚举替换条件答案

【问题标题】：Replace conditions with enum in Typescript在 Typescript 中用枚举替换条件
【发布时间】：2021-12-08 13:38:01
【问题描述】：

有以下原始代码，它是一个基于toCheck的值的函数正在构建一个css类：

const computeSomething = (toCheck: string) => {
   return clsx('flex', {
     'flex-start': toCheck === 'FIRST',
     'flex-end': toCheck === 'LAST'
   });
}

要求将enum 用于toCheck，尝试了一些但可能是错误的：

export enum toCheck {
  FIRST = 'FIRST',
  LAST = 'LAST'
}

const computeSomething = (toCheck: string) => {
   return clsx('flex', {
     'flex-start': toCheck.FIRST,
     'flex-end': toCheck.LAST
   });
}

错误提示：

“字符串”类型上不存在属性“FIRST”。

有什么想法吗？

【问题讨论】：

你甚至没有使用参数toCheck: string

标签： javascript reactjs typescript enums react-typescript

【解决方案1】：

问题是您的toCheck 不是指（预期的）枚举，因为您的参数被命名为相同（toCheck: string）。更改两者的名称应该可以解决问题：

export enum ToCheckEnum {
  FIRST = 'FIRST',
  LAST = 'LAST'
}

const computeSomething = (toCheck: string) => {
   return clsx('flex', {
     'flex-start': ToCheckEnum.FIRST,
     'flex-end': ToCheckEnum.LAST
   });
}

约定是 enum/type 应该有 Pascal 大小写，所以我认为这种方式更好。

【讨论】：

【解决方案2】：

为什么要传入 toCheck 作为参数？只需这样做：

export enum ToCheckEnum {
  FIRST = 'FIRST',
  LAST = 'LAST'
}


const computeSomething = (toCheck: ToCheckEnum) => {
  return clsx('flex', {
    'flex-start': toCheck === ToCheckEnum.FIRST,
    'flex-end': toCheck === ToCheckEnum.LAST
  });
}

【讨论】：

因为我需要知道运行哪个选项
我更新了答案

【解决方案3】：

您是shadowing 枚举，通过为您的参数使用相同的名称。为枚举和参数使用不同的名称以避免它。枚举的惯用情况是PascalCase。

之后，只需使用扩展枚举类型的泛型，你应该没有问题：

TS Playground link

declare function clsx (...args: unknown[]): void;

enum ToCheck {
  FIRST = 'FIRST',
  LAST = 'LAST',
}

const computeSomething = <T extends typeof ToCheck>(toCheck: T) => {
   return clsx('flex', {
     'flex-start': toCheck.FIRST,
     'flex-end': toCheck.LAST
   });
}

computeSomething(ToCheck); // ok

【讨论】：