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

Question

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

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

Answer 1

错误与您正在努力解决的问题（“MediaQueryEvents 扩展事件”）完全合情合理。 Event 缺少一些 MediaQueryListEvents 具有的属性（matches 和 media），因此 Typescript 会抱怨它。

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