如何解决Typescript枚举比较“有效”有效,但“ ===”无效
我正在尝试使用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
枚举的成员,所以不是很有用。
顺便说一句,您可能已经知道,属性名称称为“键”,但是为了清楚起见,我省略了双关语。但这很难做到。
您可以做的是确保将key
的类型指定为Key
,以便TypeScript在要求时可以正确地将值映射为值。如您所见,一种实现方法是将映射更改为:
Object.values(Key).find((v) => v === event.key) as Key
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。