This expression is not callable. Type '{}' has no call signatures. TS2349

Question

A quite common TypeScript error TS2349 that sth has no call signatures.

In different situations, it solves with different workarounds. But dealing with a react's Context the optimal solution I've found is using // @ts-ignore.

Please, what is the right approach in this case?

// auth.tsx

import { CurrentUserContext } from 'components/currentUser';
import React, { useState, useEffect, useContext } from 'react';

const Auth = ({ onLogin }: {onLogin: any}) => {

  const [, setCurrentUserState] = useContext(CurrentUserContext);
  const [credentials, { data }] = useMutation(AUTH);

  ...

  useEffect(() => {
    if (data) {

      // TypeScript Error without @ts-ignore:
      // This expression is not callable.
      // Type '{}' has no call signatures.  TS2349

      // @ts-ignore
      setCurrentUserState((state: any) => ({
        ...state,
        currentUser: data.login.author,
      }))
    }
  }, [data, setCurrentUserState]);

  return <div>{data.login.author}</div>
}

// currentUser.tsx

import React, { createContext, useState } from 'react';

const CurrentUserContext = createContext([{}, () => {}]);

const CurrentUserProvider = ({ children }: {children: any}) => {
  const [state, setState] = useState({
    currentUser: null,
  })
  return (
    <CurrentUserContext.Provider value={[state, setState]}>
      { children }
    </CurrentUserContext.Provider>
  )
};

export {
  CurrentUserContext,
  CurrentUserProvider,
}

n.b. "react" : "^16.13.1" "typescript": "~3.7.2"

Answer 1

Describe and explicitly specify the types:

type IUserState = {
    currentUser?: object;
};

type ICurrentUserContext = [IUserState, React.Dispatch<React.SetStateAction<IUserState>>];

const CurrentUserContext = React.createContext<ICurrentUserContext>([{}, () => null]);

const CurrentUserProvider = ({ children }: { children: any }) => {
    const [state, setState] = useState<IUserState>({
        currentUser: null,
    });

    return <CurrentUserContext.Provider value={[state, setState]}>{children}</CurrentUserContext.Provider>;
};