useMediaQuery 打字稿错误（条件将始终返回 true，因为该函数始终被定义）

Question

I'm trying to use useMediaQuery in my react app for my responsive js media queries. I'm using typescript version 4.0.3.

The code is as follows:

import { useState, useEffect } from 'react'

const useMediaQuery = (query: string) => {
    const [match, setMatch] = useState(false)

    useEffect(() => {
        const updateMatch = () => setMatch(window.matchMedia(query).matches)

        updateMatch()
        if (window.matchMedia(query).addEventListener) {
            window.matchMedia(query).addEventListener('change', updateMatch)
        } else {
            window.matchMedia(query).addListener(updateMatch)
        }
        return () => {
            if (window.matchMedia(query).removeEventListener) {
                window.matchMedia(query).removeEventListener('change', updateMatch)
            } else {
                window.matchMedia(query).removeListener(updateMatch)
            }
        }
    }, [query])

    return match
}

export default useMediaQuery

The error message I'm getting is:

This condition will always return true since the function is always defined. Did you mean to call it instead? TS2774

updateMatch()
  if (window.matchMedia(query).addEventListener) {
       ^

Does anyone have any ideas on how to fix this code to get it working?

Thanks

Answer 1

Maybe you just don`t need this condition. On my env I have error

deprecated MediaQueryList.removeListener

so you will have another issue when fix current

Answer 2

if(window.matchMedia(query).addEventListener) {...}

This will always return the function reference. So it will always execute the if block. That's why typescript is throwing error. So instead of using if/else, you could directly call the methods.

window.matchMedia(query).addEventListener('change', updateMatch)
window.matchMedia(query).addListener(updateMatch)