打字稿枚举比较'in'有效，但不是'==='

Posted 2023-03-13

【中文标题】打字稿枚举比较\'in\'有效，但不是\'===\'

【英文标题】：Typescript Enum Comparison 'in' works but not '==='打字稿枚举比较'in'有效，但不是'==='

【发布时间】：2020-12-17 12:30:22

【问题描述】：

我正在尝试使用 Enum 从 rxjs observable 获取安全事件输出。这是完整的代码示例：

// Enum
export enum Key 
  ArrowUp = "ArrowUp",
  ArrowDown = "ArrowDown",
  ArrowLeft = "ArrowLeft",
  ArrowRight = "ArrowRight",
  W = "w",
  A = "a",
  S = "s",
  D = "d",
  One = "1",
  Two = "2",

// Observable
export const useKeyboardEvent = () => 
  const $keyboardEvent: Observable<Key> = fromEvent<KeyboardEvent>(
    document,
    "keydown"
  ).pipe(
    filter((event: KeyboardEvent) => 
      return !!Object.values(Key).find((v) => v === event.key);
    ),
    map(
      (event: KeyboardEvent) =>
        Object.keys(Key)[
          (Object.values(Key) as string[]).indexOf(event.key)
        ] as Key
    ),
    distinctUntilChanged()
  );

  return $keyboardEvent;
;

// Subscription
React.useEffect(() => 
  const keyboardEventSub = $keyboardEvent.subscribe(setColor);

  return () => 
    keyboardEventSub.unsubscribe();
  ;
, [$keyboardEvent, setColor]);

// handler
const color = React.useRef<string>("black");
const setColor = React.useCallback((key: Key) => 
  if (key === Key.One) 
    color.current = "black";
   else if (key === Key.Two) 
    color.current = "red";
  
, []);

当我退出不同的比较时，结果如下：

key === Key.One false 
key in Key true

我的问题： 我如何比较才能使key === Key.One 成功？为什么比较失败，而in 成功了？

【问题讨论】：

记录key 的值使用console.log(JSON.stringify(key)) 对Key.One 执行相同操作。您应该会看到区别。

嘿，谢谢 :) 所以看起来我正在将“键值”与“值值”进行比较，将映射更改为 Object.values(Key).find((v) => v === event.key) as Key 修复了它！继续并将其作为解决方案发布，我会批准它，否则我将通过 EOD 对其进行更新。再次感谢！

【参考方案1】：

枚举在 TypeScript 中是很有趣的东西。它们基本上是键和值之间的映射。所以当你传递key 时，你传递的是字符串"One"，但是当你得到Key.One 进行比较时，你得到的是字符串"1"。所以，"One" === "1" 返回 false 并且你被卡住了。

当您执行key in Key 时，它会在Key 枚举中查找属性名称One，并找到它，因此它返回true。当然，这只是告诉你key 是Key 枚举的成员，所以不是很有用。

^{顺便说一句，您可能知道，属性名称被称为“键”，但为了清楚起见，我放弃了双关语。但这很难做到。}

您可以做的是确保将key 的类型指定为Key，以便TypeScript 在被要求时将值正确映射到值。正如您所发现的，一种方法是将映射更改为：

Object.values(Key).find((v) => v === event.key) as Key