javascript - Typescript: Tipo 'Promise' não é atribuível ao tipo 'void | Destructor'

O editor está mostrando

O tipo 'Promise' não pode ser atribuído ao tipo 'void | Destructor'.

para a chamada checkUserLoggedIn() no useEffect.

Posso me livrar disso fazendo const checkUserLoggedIn:any

No entanto, talvez essa não seja a maneira mais ideal de resolver isso...

Se eu fizer const checkUserLoggedIn:Promise, então recebo um erro diferente:

Esta expressão não é chamável. O tipo 'Promise' não possui assinaturas de chamada.

o que não é o que eu quero... Eu quero que seja chamável... Estou traduzindo/convertendo meu arquivo JavaScript para 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)
        }
    }

Resposta #1

Funções arrow escritas da maneira que você descreveu retornam implicitamente o valor da função. Por exemplo, esta função () => 4 retorna o valor 4. Por outro lado, quando você a envolve em um bloco, deve definir explicitamente o valor de retorno: () => { 4; } esta função não retorna nada.

No seu caso, você está passando uma função arrow anônima que retorna implicitamente o resultado de uma função assíncrona, que é uma promessa.

Para corrigir isso, envolva o conteúdo da função que você passa para useEffect em um bloco:

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