我正在尝试使用Enum从可观察的rxjs获取安全事件输出。这是完整的代码示例：
// 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成功了呢？
枚举在TypeScript中很有趣。它们基本上是键和值之间的映射。因此，当您通过传递时，您传递的key是字符串"One"，但是当您Key.One进行比较时，您传递的是字符串"1"。因此，"One" === "1"返回false会卡住。
当您执行时key in Key，它将One在Key枚举中查找属性名称并找到它，因此它返回true。当然，这只是告诉您这key是Key枚举的成员，因此不是很有用。
顺便说一句，您可能已经知道，属性名称被称为“键”，但是为了清楚起见，我省略了双关语。但是这很难做到。
您可以做的是确保指定keyas 的类型，Key以便TypeScript在被要求时做正确的值到值的映射。如您所见，一种实现方法是将映射更改为：
Object.values(Key).find((v) => v === event.key) as Key
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句