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

admin管理员组

文章数量:1199791

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)
        }
    }

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)
        }
    }

• javascript
• typescript
• promise
• typescript-generics
• react-typescript

Share Improve this question Follow asked May 13, 2022 at 18:42 prestonpreston 4,3371010 gold badges5454 silver badges8989 bronze badges 0

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 18

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; } 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();
}, []);

    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)
        }
    }

本文标签： javascriptTypescript Type 39Promiseltvoidgt39 is not assignable to type 39voidDestructor39Stack Overflow