component which lacks return-type annotation, implicitly has an 'any' return type

Viewed 77

I don't understand this typescript error that I'm getting saying:

'MyGoogleLogin', which lacks return-type annotation, implicitly has an 'any' return type.

I just want the component to receive an anonymous function with void return type as props and I'm frustrated about this typescript error because I can't find the correct syntax to do this simple thing.

function MyGoogleLogin({setModal: () => void}) {
  const router = useRouter()
    return (
        <GoogleLogin
            onSuccess={(credentialResponse: CredentialResponse) => {
                let jwt = credentialResponse.credential
                if (!jwt) {
                    return;
                }
                handleLogin(jwt)
            }}
            onError={() => {
                console.log('Login Failed');
            }}
        />
    )
}

edit: This question is NOT a duplicate. I have not configured any particular compiler options. The solutions in the proposed "duplicate" question to not apply to my situation. I've also added a photo which shows that setting "any" to the return type does not solve the issue.

enter image description here

1 Answers

This is not the solution I wanted, but the only workaround currently is to define my own inteface for my props:

interface LoginProps {
  setModal: (enabled: boolean) => void
}

function MyGoogleLogin({setModal}: LoginProps) {
  const router = useRouter()
    return (
        <GoogleLogin
            onSuccess={(credentialResponse: CredentialResponse) => {
                let jwt = credentialResponse.credential
                if (!jwt) {
                    return;
                }
                handleLogin(jwt)
            }}
            onError={() => {
                console.log('Login Failed');
            }}
        />
    )
}

Defining an interface here seems like it shouldn't be necessary but whatever. If someone has a better solution feel free to share.

Related