reactjs - typescript react 上下文+类型 '{}'没有调用签名

Question

我已经创建了一个 Notification Toast 服务，除了 ToastContext 周围的一些 typescript 错误外，它似乎可以正常工作。

在我导入连接到 contextProvider 的 useToast() Hook 的任何页面上调用 toast。 toast(...) 函数出现 typescript 错误。我收到的错误是

错误 这个表达式是不可调用的。类型“{}”没有调用签名。

toast Hook

<button
    onClick={() => {
        return toast({
            title: "I am toasty"
        });
    }}
>Toast Me</button>

上下文和使用上下文钩子(Hook)

export const ToastContext = createContext({});

export function useToast() {
  return useContext(ToastContext);
}

这里是当前代码的codesandbox https://codesandbox.io/s/dazzling-spence-clehl .

我尝试用 createContext 键入

interface ContextType {
   toasts: []
   toast: () => void
}

export const ToastContext = createContext<ContextType | {}>({});

Answer 1

你的上下文值是一个函数，而你用一个空对象初始化上下文(为什么？)，所以静态类型评估，调用toast()是尝试在对象 ( '{}' has no call signatures ) 上发出函数。

根据其用途修复您的初始化:

// toast is a function
<ToastContext.Provider value={toast}>{children}</ToastContext.Provider>

export const ToastContext = createContext((payload: any) => {});

---

或者，我猜你最初的想法是尝试做类似的事情:

// import ToastProps
interface ContextType {
  toasts: [] | ToastProps[];
  toast: (payload: any) => void;
}

export const ToastContext = createContext<ContextType>({
  toast: () => {},
  toasts: []
});

// Initilization
const { toast, toasts } = useToasts();

// Pass ContextType
<ToastContext.Provider value={{toast, toasts}}>{children}</ToastContext.Provider>

// Context usage
const { toast } = useToast();
toast(); // is a function, GOOD

在哪里ContextType火柴useToast返回值和 createContext (尝试使用 ContextType 返回值重用 useToast)。