时间戳

首页 > 解决方案 > '(e: MediaQueryListEvent) => void' 类型的参数不可分配给'(e: Event) => void' 类型的参数

reactjs - '(e: MediaQueryListEvent) => void' 类型的参数不可分配给'(e: Event) => void' 类型的参数

问题描述

我创建了以下挂钩来监听事件：

const useEventListener = (event: keyof WindowEventMap, callback: (e: Event) => void, element: EventTarget | null = window) => {

  const callbackRef = useRef<(e: Event) => void>(callback)

  useEffect(() => {
    callbackRef.current = callback
  }, [callback])

  useEffect(() => {
    const handler: EventListener = e => callbackRef.current(e);
    element?.addEventListener(event, handler)
    return () => element?.removeEventListener(event, handler)
  }, [event, element])
}

现在我正在尝试创建一个监听媒体查询的钩子。但是，当我传递给callback: (e: Event) => void以下函数时(e: MediaQueryListEvent) => setIsMatching(e.matches)，我从打字稿中得到一个错误。从那以后我一直在挣扎MediaQueryListEvent extends Event！我该如何解决？

const useMediaQuery = (mediaQuery: string) => {
  const [isMatching, setIsMatching] = useState(false);
  const [mediaQueryList, setMediaQueryList] = useState<MediaQueryList|null>(null);

  useEffect(() => {
    const list: MediaQueryList = window.matchMedia(mediaQuery)
    setMediaQueryList(list)
    setIsMatching(list.matches)
  }, [mediaQuery])

  # ERROR HERE
  useEventListener("change", (e: MediaQueryListEvent) => setIsMatching(e.matches), mediaQueryList)

  return isMatching;

}

完整错误：

Argument of type '(e: MediaQueryListEvent) => void' is not assignable to parameter of type '(e: Event) => void'.
Types of parameters 'e' and 'e' are incompatible.
    Type 'Event' is missing the following properties from type 'MediaQueryListEvent': matches, media

标签： reactjstypescriptreact-hooksreact-typescript

解决方案

该错误对您正在努力解决的问题（“MediaQueryEvents extends Event”）非常有意义。 Event缺少一些MediaQueryListEvents具有 (matches和media) 的属性，因此 Typescript 会抱怨它。

如果你只使用你的钩子，你可以在你的钩子参数MediaQueryListEvents中将类型从更改为e: Event（可能需要从你正在使用的任何包中导入该类型定义）。如果您将使用各种不同的事件，则需要将其更改为，或使用管道运算符为(等) 设置多种可能的类型。e: MediaQueryListEventscallbacke: anyee: Event | MediaQueryListEvents

推荐阅读