用 Typescript 中的枚举替换条件

Question

原代码如下，是一个函数，它是根据toCheck的值构建一个css class：

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
   });
}

错误说：

Property 'FIRST' does not exist on type 'string'.

有什么想法吗？

Answer 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 大小写，所以我认为这种方式更好。

Answer 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
  });
}

Answer 3

你是shadowing the enum by using the same name for your parameter. Use a different name for the enum and the parameter to avoid it. The idiomatic case for enums is 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

用 Typescript 中的枚举替换条件

Replace conditions with enum in Typescript

javascript

enums

typescript

reactjs

react-typescript