此表达式不可调用。类型"{}"没有呼叫签名。TS2349

Question

sth has no call signatures的一个非常常见的TypeScript错误TS2349。

在不同的情况下，它使用不同的解决方案。但在处理react的上下文时，我发现的最佳解决方案是使用// @ts-ignore。

请问，在这种情况下，正确的方法是什么？

// 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."；反应"："16.13.1"；"typescript"："3.7.2"；

Answer 1

描述并明确指定类型：

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