Typescript: Type 'Promise<void>' is not assignable to type 'void | Destructor'

Question

The editor is showing

Type 'Promise' is not assignable to type 'void | Destructor'.

for the checkUserLoggedIn() call in useEffect.

I can get rid of it by doing const checkUserLoggedIn:any

However maybe that's not the most ideal way of solving this...

If I do const checkUserLoggedIn:Promise I then get a different error:

This expression is not callable. Type 'Promise' has no call signatures.

which is not what I want...I want it to be callable...I'm translating/converting my javascript file to typescript.....

useEffect(() => checkUserLoggedIn(), [])

    // Check if user is logged in
    const checkUserLoggedIn = async () => {
        console.log('checkUserLoggedIn')

        const res = await fetch(`${NEXT_URL}/api/user`)
        const data = await res.json()

        if (res.ok) {
            setUser(data.user)

            console.log('data.user', data.user)
            router.push('/account/dashboard')
        } else {
            setUser(null)
        }
    }

Answer 1

Arrow functions written in the way you've described implicitly return the value from the function. For example, this function () => 4 returns the value 4 . Conversely, when you wrap this in a block, you must explicitly define the return value: () => { 4; } () => { 4; } this function does not return anything.

In your case, you are passing an anonymous arrow function that implicitly returns the result of an asynchronous function, which is a promise.

To fix this, wrap the content of the function you pass to useEffect in a block:

useEffect(() => {
  checkUserLoggedIn();
}, []);

Answer 2

    useEffect(() => {
        checkUserLoggedIn()
    }, [])

    // Check if user is logged in
    const checkUserLoggedIn:() => Promise<void> = async () => {
        console.log('checkUserLoggedIn')

        const res = await fetch(`${NEXT_URL}/api/user`)
        const data = await res.json()

        if (res.ok) {
            setUser(data.user)

            console.log('data.user', data.user)
            router.push('/account/dashboard')
        } else {
            setUser(null)
        }
    }